調用百度地圖開發平臺的JavascriptAPI實現將市縣位置轉換成坐標
最近的項目要做的地圖比較多，有的還比較復雜，而地圖用到的坐標，上網找json文件更是良莠不齊的。真是讓人傷腦筋，後來突然想到了百度地圖開發平臺，沒想到真的有對應的API哦，謝天謝地！！！下面說一下完整的實現過程吧。
詳細步驟：
1. 首先找到百度地圖開發平臺 （鏈接： http://lbsyun.baidu.com/）
2.打開下圖的Javascript API頁面：
3. 接著上面的操作，找到 Javascript API頁面左側的示例DEMO，點擊跳轉鏈接 ： http://lbsyun.baidu.com/jsdemo.htm#a1_2
4. 在示例DEMO頁面下，找到逆/地址解析下的地址解析，如下圖：
5. 好啦，找到我們想要的demo，接下來肯定就是復制到本地編輯修改啦：
<!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=您的密鑰"></script> <title>地址解析</title> </head> <body> <div id="allmap"></div> </body></html> <script type="text/javascript"> // 百度地圖API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.331398,39.897445); map.centerAndZoom(point,12); // 創建地址解析器實例 var myGeo = new BMap.Geocoder(); // 將地址解析結果顯示在地圖上,並調整地圖視野 myGeo.getPoint("北京市海澱區上地10街", function(point){ if (point) { map.centerAndZoom(point, 16); map.addOverlay(new BMap.Marker(point)); }else{ alert("您選擇地址沒有解析到結果!"); } }, "北京市"); </script>
6. 我們在瀏覽器打開復制下來的代碼，哎呀媽，居然提示報錯了 ：(
看提示，我們看到是因為缺了百度地圖開發平臺秘鑰，所以我們接下來要復制提示的鏈接去獲取秘鑰。
7. 打開上面提示的鏈接 http://lbsyun.baidu.com/apiconsole/key# ，可以看到，我這裏已經創建好了一個秘鑰
8. 點擊“創建應用”創建秘鑰應用
應用名稱自定義，這裏為了演示，隨意輸入的，然後選擇瀏覽器端（根據自己的需求選擇），啟用服務我是全選的，白名單的話，因為我這裏是做測試的，所以根據提示輸入了星號。好啦，點擊提交就可以了。
9. 提交新建應用後會回到應用列表，可以看到我們剛提交的應用，這樣就得到了我們需要的秘鑰啦
10. 那麽怎麽使用該秘鑰呢？先復制圈起來的那一串字符，然後替換demo代碼的“您的秘鑰”,下面灰色標識部分：
<!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=foH5UE6linZ6MhbINCOEAhIGuNqaO6t3"></script> <title>地址解析</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地圖API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.331398,39.897445); // map.centerAndZoom(point,12); // 創建地址解析器實例 var myGeo = new BMap.Geocoder(); // 將地址解析結果顯示在地圖上,並調整地圖視野 myGeo.getPoint("北京市海澱區上地10街", function(point){ if (point) { // map.centerAndZoom(point, 16); // map.addOverlay(new BMap.Marker(point)); //這裏不需要展示地圖，所以將生成地圖的代碼註釋了，然後再下面打印坐標 console.log(point); }else{ alert("您選擇地址沒有解析到結果!"); } }, "北京市"); </script>
11. 再次刷新瀏覽器，打開開發者工具查看輸出結果：
12. 好啦，上面已經實現了地址轉換成坐標的功能啦。那麽我們來看下具體的需求： 獲取廣東省市縣的坐標
13. 我們這裏以廣東省的21個地級市轉換為例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>根據位置獲取坐標</title> </head> <body> <textarea name="" rows="" cols="" id="addressArea"></textarea> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=hM6RX0q32fRq0q5OWMNM0wlGYuuwQtSa"></script> <script src="jquery.min.js"></script> <script> var newCityDatas = {}; //存放數據的對象
//var cityDatasStr = "廣州、深圳、佛山、東莞、中山、珠海、江門、肇慶、惠州、汕頭、潮州、揭陽、汕尾、湛江、茂名、陽江、韶關、清遠、雲浮、梅州、河源";
//數據來源於百度百科，復制過來後修改成有規律的字符串，然後轉換成數組，在頁面輸出後再復制，也就得到下面的數組，要給每個數據添加“市”；
var cityDatas = ["廣州市", "深圳市", "佛山市", "東莞市", "中山市", "珠海市", "江門市", "肇慶市", "惠州市", "汕頭市", "潮州市", "揭陽市", "汕尾市", "湛江市", "茂名市", "陽江市", "韶關市", "清遠市", "雲浮市", "梅州市", "河源市"];
//遍歷數組，調用方法將位置轉成坐標 for (var i=0;i<cityDatas.length;i++) { getPoint(cityDatas[i]); } function getPoint(adds){ // 創建地址解析器實例 var myGeo = new BMap.Geocoder(); // 將地址解析結果顯示在地圖上,並調整地圖視野 myGeo.getPoint(adds, function(point){ console.log(adds); newCityDatas[adds] = [point.lng,point.lat]; console.log(newCityDatas); $("#addressArea").val(JSON.stringify(newCityDatas)); //輸出拼接後的結果 }); } </script> </body> </html>
14. 最後輸出的數據結果如下：具體的數據格式根據自己的項目需求做調整哈 ：）
{
"佛山市": [113.134026,23.035095],
"東莞市": [113.763434,23.043024],
"珠海市": [113.562447,22.256915],
"深圳市": [114.025974,22.546054],
"廣州市": [113.30765,23.120049],
"江門市": [113.078125,22.575117],
"肇慶市": [112.479653,23.078663],
"中山市": [113.42206,22.545178],
"惠州市": [114.410658,23.11354],
"汕頭市": [116.72865,23.383908],
"潮州市": [116.630076,23.661812],
"湛江市": [110.365067,21.257463],
"揭陽市": [116.379501,23.547999],
"汕尾市": [115.372924,22.778731],
"茂名市": [110.931245,21.668226],
"陽江市": [111.97701,21.871517],
"韶關市": [113.594461,24.80296],
"雲浮市": [112.050946,22.937976],
"清遠市": [113.040773,23.698469],
"梅州市": [116.126403,24.304571],
"河源市": [114.713721,23.757251]
}
因為這次找坐標找得有點耗時，所以總結下來以後方便回顧學習，有問題的可以留言哦，有空再總結下最近做的地圖，某些數據也是比較難找 ：）
調用百度地圖開發平臺的JavascriptAPI實現將市縣位置轉換成坐標