深刻淺出百度地圖API開發系列（2）：建立地圖

時間 2019-11-09

標籤深刻百度地圖 api 開發系列建立简体版

原文原文鏈接

上一篇文章裏，先介紹了一下百度地圖API開發所涉及到的一些基礎概念，包括投影，座標系等基礎概念，再有了這些基礎後，咱們能夠開始開發本身的web地圖了。先來個代碼示例（建議你們都是用百度地圖API大衆版2.0。大衆版2.0對移動端的適配也進行了優化）javascript

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 6     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 7     <title>Map Coordinate</title>
 8     <style type="text/css">
 9     /*<![CDATA[*/
10 
11     html {
12         height: 100%;
13     }
14     body {
15         height: 100%;
16         margin: 0px;
17         padding: 0px;
18     }
19     #map_container {
20         height: 100%;
21     }
22     /*]]>*/
23     </style>
24 
25 </head>
26 
27 <body>
28     <div id="map_container"></div>
29 </body>
30 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wWy2A8K94nhntYTYUHS19RXW"></script>
31 <script type="text/javascript">
32 var mp = new BMap.Map('map_container', {
33     enableHighResolution: true
34 });
35 mp.centerAndZoom('北京', 15);
36 </script>
37 
38 </html>

上面的代碼很是簡單，首先定義個必定大小的div，而後將div的id傳入BMap.Map類生成map示例。最後map示例調用centerAndZoom設置地圖中心點和縮放級別，設置完以後就能夠顯示一幅地圖了，最簡單的地圖展現就完成。new一個Map實例的時候，第二個參數能夠傳入一些配置屬性，上面的例子中就是開啓了高清圖配置。這樣在Mac的高清屏下會加載高清圖。固然默認值也是true，開啓高清圖的，因此不設置enableHighResolution也不要緊。最後centerAndZoom的時候第一個參數能夠是一個BMap.Point對象，也能夠是一個字符串，字符串必需是一個地址名，若是傳入的是字符串地址，API內部會首先拿這個地址名去調用後臺服務獲取地址名相關的屬性，包括了地址所屬區域的中心點座標和一些附屬信息。整個過程是異步獲取的。因此相對於直接傳入Point對象，字符串參數會多一次網絡請求，固然整個的出圖時間也就相對慢一些。css

　　還須要注意的是，若是開發者須要使用百度地圖api, ak這個東西是必須的，上面例子中的ak也是我在百度地圖上面申請的，若是沒有ak的話，使用地圖API百度鑑權的時候是不能經過的,也就沒法使用地圖API的服務，申請ak的地址：申請ak. 申請ak的時候選擇應用類型是瀏覽器端，勾選上Javascript API。下面白名單表示你想對這個ak的使用地方進行限制，好比你只想這個ak在*.mysite.com 這樣的域名下使用，那你就把*.mysite.com加入到refer白名單中，那麼全部其餘不屬於這個refer的網站使用你的ak也是鑑權不經過的，若是你什麼都不填，就無任何限制。申請ak以下圖：html

結語：因此說使用百度地圖API很是簡單，首先申請ak，按照ak去加載api腳本文件，http://api.map.baidu.com/api?v=2.0&ak=****。獲取文件以後經過BMap.Map類生成相應的map對象，由於百度地圖API中map對象是接管一切的，不少方法都是經過map對象去執行的。因此使用也很是簡單。java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。