百度地圖API之環境搭建

標籤：

前言

地圖對於每一個人的重要性不言而喻，隨著使用者的需求的增加，你是不是也要考慮在你的項目中加入地圖這個元素，國內首選的肯定就是百度地圖了。因此瞭解如何使用百度地圖相關的API是很有必要的。本文顯示介紹如何搭建地圖環境及一些注意事項。

搭建百度地圖環境1.註冊百度帳號

首先確保你有一個百度帳號。如果已經有了，直接跳過這個步驟。沒有的朋友請到https://www.baidu.com/ 註冊一個吧。

2. 申請為百度開發人員

登陸已經註冊的帳號申請成為百度開發人員。網址：http://app.baidu.com/。

3. 申請密鑰

申請網址：http://lbsyun.baidu.com/ 如所示：

如果還不清楚的朋友，請參考http://jingyan.baidu.com/article/363872eccda8286e4aa16f4e.html。

4. 查看密鑰

建立應用之後會出現我們需要的密鑰，如所示：

5. 查看百度提供的百度地圖相關的API文檔

本次示範主要是基於JavaScript相關的API，相關的參考文檔網址如下：http://lbsyun.baidu.com/index.php?title=jspopular。
相關內容如所示：

恭喜：至此，準備工作已經做好了！

建立Helloworld.html擷取地圖資料

根據官方提供的API，可以看出有兩種實現方式。一種是根據百度地圖提供的地圖介面直接在網頁的head標籤內指定。另一種是在頁面載入的過程中利用JavaScript動態載入。如所示：

head標籤內直接引入百度地圖介面

相信很多攻城獅在html中引入過JavaScript，使用方法類似。如所示：

非同步載入百度地圖介面

這種方式是在JavaScript指令碼中動態載入百度地圖介面。如所示：

示範執行個體

下面將已執行個體的形式示範如果通過短短的幾行代碼擷取到百度地圖相關的資料。請參考的朋友們注意代碼中的注釋部分，這部分能幫你更好的理解API介面。

<!DOCTYPE html><html><head>    <title></title>    <script src="http://api.map.baidu.com/api?v=2.0&ak=DDd05fcba9fea5b83bf648515e04fc4c" type="text/javascript"></script></head><body>     <!--        第一種載入百度地圖方式        1. 在head標籤裡引入百度地圖js            使用V1.4及以前版本的引用方式：            <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>            使用V2.0版本的引用方式：            <script src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰" type="text/javascript"></script>        2. 建立dom容器用來顯示地圖，樣本中建立一個id為map的div        3. 在js中擷取地圖資料並顯示            <script type="text/javascript">                var map = new BMap.Map("map");                map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);            </script>               -->    <div align="center" style="margin-top: 50px;">        <h1>第一種載入百度地圖方式</h1>        <div id="map1" style="width:900px;height:600px;"></div>      </div>    <script type="text/javascript">        var map = new BMap.Map("map1");        map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);    </script>    <!--        第二種引入地圖方式        1. 在頁面剛載入的時候擷取百度地圖的js並設定擷取後執行的回呼函數即是callback參數。           window.onload = loadScript; 即是在頁面載入的過程中會執行loadScript方法，該方法就是擷取百度地圖的js        2. 執行callback函數initialize方法，將地圖資料顯示。    -->    <div align="center" style="margin-top: 50px;">        <h1>第二種載入百度地圖方式</h1>        <div id="map" style="width:900px;height:600px;"></div>      </div>    <script type="text/javascript">          function initialize() {            var mp = new BMap.Map(‘map‘);            mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11);          }          function loadScript() {            var script = document.createElement("script");            script.src = "http://api.map.baidu.com/api?v=2.0&ak=DDd05fcba9fea5b83bf648515e04fc4c&callback=initialize";//此為v2.0版本的引用方式            // http://api.map.baidu.com/api?v=1.4&ak=您的密鑰&callback=initialize"; //此為v1.4版本及以前版本的引用方式            document.body.appendChild(script);          }          window.onload = loadScript;    </script>  </html>

運行結果如下所示

以上不難看出已經擷取到地圖相關的資料了！

總結

本文主要是介紹使用百度地圖介面相關的準備工作及如何搭建helloworld.html擷取百度地圖的資料並顯示。具體其他動作將會在接下來介紹。

百度地圖API之環境搭建