python+javascript+baiduMapAPI實現地圖批量標註地點
阿新 • • 發佈：2019-01-14
現將儲存在excel表中的詳細地址匯入，然後通過百度地圖API查詢各個地點的座標經緯度，並將資料儲存到csv檔案中備用
''' 呼叫百度地圖API，批量輸入地址查詢座標經緯度 ''' import pandas as pd import json import requests data=pd.read_excel("schools_bantian.xlsx") print(data.loc[0,"地址"]) ak = 'duaE7gEWkw9LUCnkX1GDf4jo2nGyL84H' from urllib.request import urlopen, quote import requests def getlnglat(address): url = 'http://api.map.baidu.com/geocoder/v2/' output = 'json' ak = 'duaE7gEWkw9LUCnkX1GDf4jo2nGyL84H' address = quote(address) uri = url + '?' + 'address=' + address + '&output=' + output + '&ak=' + ak req = urlopen(uri) res = req.read().decode() temp = json.loads(res) lat = temp["result"]["location"]["lat"] lng = temp["result"]["location"]["lng"] return lat,lng for indexs in data.index: location=data.loc[indexs,"地址"] print(location) get_location = getlnglat(location) get_lat = get_location[0] get_lng = get_location[1] data.loc[indexs,"經度"]=get_lng data.loc[indexs,"緯度"]=get_lat print(get_lat,get_lng) data.to_excel("school_locations.xls",sheet_name='sheet1') data_html=pd.DataFrame(columns=["location","address"]) for indexs in data.index: data_html.loc[indexs,"location"]="new BMap.Point("+str(data.loc[indexs,"經度"]) + "," + str(data.loc[indexs,"緯度"]) + ")," data_html.loc[indexs,"address"]="'"+data.loc[indexs,"學校"]+"'," data_html.to_csv("school_location.csv",encoding="gbk") print(data_html)
將所得的座標資料和地名替換HTML文件中相應的JS程式碼部分，然後用瀏覽器執行，結果便能呈現
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=uft-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>百度地圖批量標註地點</title> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";} #l-map{height:100%;width:100%;} #r-result{width:100%; font-size:14px;line-height:20px;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=duaE7gEWkw9LUCnkX1GDf4jo2nGyL84H"></script> </head> <body> <div id="l-map"></div> <div id="r-result"> <input type="button" value="批量反地址解析+商圈" onclick="bdGEO(0)" /> <div id="result"></div> </div> </body> </html> <script type="text/javascript"> // 百度地圖API功能 var map = new BMap.Map("l-map"); map.centerAndZoom(new BMap.Point(114.06384607388078,22.630262779736196), 13); map.enableScrollWheelZoom(true); var index = 0; var myGeo = new BMap.Geocoder(); var adds = [ new BMap.Point(114.06384607388078,22.630262779736196), new BMap.Point(114.0767848711878,22.622247336436747), new BMap.Point(114.08536219761812,22.65584873862453), new BMap.Point(114.07203031978617,22.64151416394081), new BMap.Point(114.07679078024144,22.61849062005323), new BMap.Point(114.07055613127525,22.636193248309848), new BMap.Point(114.07299689651457,22.6622997110033), new BMap.Point(114.0767848711878,22.622247336436747), new BMap.Point(114.06613468053965,22.610597018937156), new BMap.Point(114.09147953237627,22.638126872164055), new BMap.Point(114.07295634071573,22.647373363807283), new BMap.Point(114.08083690905373,22.6582746288261), new BMap.Point(114.07332028649806,22.643468781312336), new BMap.Point(114.07850844996923,22.637608013657868), new BMap.Point(114.08127137361518,22.659048430362592), new BMap.Point(114.06351059450174,22.644678888503325) ]; labels=[ '阪田街道花城小學', '阪田街道育英小學', '阪田街道雪象小學', '阪田街道愛愛學校', '阪田街道五園小學', '阪田街道阪田小學', '阪田街道寶崗小學', '龍崗區阪田街道五和小學', '華南師範大學附屬龍崗雅寶小學', '深圳科學高中', '阪田街道萬科城實驗學校', '阪田街道雪象學校', '阪田街道巨集揚學校', '龍崗區阪田揚美實驗學校', '深圳市龍崗區深圳大學師範學院附屬阪田學校', '龍崗區科技城外國語學校' ]; for(var i = 0; i<adds.length; i++){ var marker = new BMap.Marker(adds[i]); map.addOverlay(marker); marker.setLabel(new BMap.Label(labels[i],{offset:new BMap.Size(20,-15)})); } function bdGEO(){ var pt = adds[index]; geocodeSearch(pt); index++; } function geocodeSearch(pt){ if(index < adds.length-1){ setTimeout(window.bdGEO,400); } myGeo.getLocation(pt, function(rs){ var addComp = rs.addressComponents; document.getElementById("result").innerHTML += index + ". " +adds[index-1].lng + "," + adds[index-1].lat + "：" + "商圈(" + rs.business + ") 結構化資料(" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + ")<br/><br/>"; }); } </script>