百度地圖 JavaScript 開發入門

炎藤發表於2015-04-09
地圖JavaScript

這裡有相當豐富的示例和演示: http://developer.baidu.com/map/jsdemo.htm#b0_7

最基本的元素:

  1. Access Key，必須先從百度 API 控制檯那邊申請到，地址: http://lbsyun.baidu.com/apiconsole/key

  2. 引用百度 JavaScript API 

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的金鑰"></script>

  3. Body 部分

    <div id="allmap"></div>

  4. Script 部分

    <script type="text/javascript">
    // 百度地圖API功能
    var map = new BMap.Map("allmap");    // 建立Map例項
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地圖,設定中心點座標和地圖級別
</script>

這樣你就完成了最簡單的一個百度地圖的案例了。

完整的程式碼如下:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F94fa503a814c1e1b338f12cd791defd"></script>
    <title>地圖展示</title>
</head>
<body>
  <div id="allmap"></div>
  <script type="text/javascript">
      // 百度地圖API功能
      var map = new BMap.Map("allmap");    // 建立Map例項
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地圖,設定中心點座標和地圖級別
  </script>

相關文章