轉載 百度地圖API二次開發小經驗分享

轉載From：http://www.cnblogs.com/yiyiBlog/p/5122224.html

最近在作一個物流後臺系統，須要用地圖來把訂單地址展現出來，須要在地圖上批量框選座標進行排單，須要看到配送員的實時位置等等功能。

在高德地圖、騰訊地圖、百度地圖三者間，我選了百度地圖，沒有緣由，我的偏好，所以我也不知道高德地圖和騰訊地圖好很差用。反正到目前爲止，我所想到的功能，百度都有對應的接口提供，點個贊。

1、關於百度地圖的JavaScript API

在網站上經過js直接來調用百度的api，使用方法很簡單，能夠參考官網：http://developer.baidu.com/map/index.php?title=jspopular。

開發初期給我幫助比較大的是直接拷貝demo示例提供的代碼：http://developer.baidu.com/map/jsdemo.htm#a1_2（我用360瀏覽器顯示不正常，建議使用chrome）

固然，demo展現的功能不是所有的功能，大概有80%吧，想靈活的使用各類方法，有事沒事得把js API的類參考文檔看一下，大概有什麼類，有什麼方法。參考地址：http://developer.baidu.com/map/reference/index.php

這裏推薦個有個比較隱蔽的js文檔網址：http://developer.baidu.com/map/library.htm。這裏有一些功能的補充，都是一些比較高級的功能，在開發的中後期都是參考這個網址來進行開發。

2、關於百度地圖的Web API

web端的接口就相對少一些，我使用PHPExcel來導入訂單信息，而後使用Web API對地址信息進行轉換，最後把地址的相關信息保存到數據庫當中。例如：導入地址：廣州市天河北嘉逸國際酒店五樓力美健。經過Web API的Geocoding API能夠獲取到經度：113.315296，緯度：23.138987，所在區：越秀區，所在路：梅花路。

獲取到地址的詳細信息後，就在排單頁面上以座標的形式標記出來，這裏就和JavaScript API結合使用了。 

3、功能示例展現

我就經過參考上述的各類文檔，東借西湊作出一些小功能，如今展現給你們看看。

1.以熱力圖的方式直觀展現訂單的密集程度以及區域訂單數量。

左上角的工具條是繪製覆蓋物的工具條，在地圖上劃一個區域，而後結合百度提供的幾何換算的API，能夠把繪製區內的訂單蒐集起來（我所作的是將區域內的訂單移出地圖，並放在「購物車」內），效果以下圖：

2.實時位置展現

這是一個在不停上下跳動的座標點，旁邊是label信息（固然能夠作得美一些）。這裏能夠參考百度地圖提供的鷹眼服務。參考網址：http://yingyan.baidu.com/index.html

4、注意事項

1.樣式問題。若是是使用BootStrap作的前端，那麼css文件：bootstrap.css或bootstrap.min.css中的label將會和百度地圖的地圖樣式有衝突，致使百度地圖的label樣式失效。

解決方法以下圖所示：移除bootstrap.css文件中label的max-width樣式。

2.定位問題。通常來講，經過PC端瀏覽器對我的目前位置定位是不許確的，強烈建議使用移動端來測試定位的代碼。

3.地址解析問題。偶爾會遇到地址解析不了的問題，那極可能就是你沒有填寫所要解析地址所在的城市。若是業務需求不一樣的城市進行地址的解析，那麼能夠經過session、查詢數據庫等方式來實時獲取用戶所在的城市。這個參數雖然不顯眼，可是千萬不能忽略，否則會出現各類意想不到的精彩事情。以下圖所示：

5、小結

總的來講，百度地圖仍是挺好用的，並且開發難度不算大，再點個贊。

你們若是也在進行地圖方面的開發，能夠互相交流經驗，同時也歡迎你們多多指教！