當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

百度地图-省市县联动加载地图

發(fā)布時間：2025/6/15 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了百度地图-省市县联动加载地图小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

2019獨角獸企業(yè)重金招聘Python工程師標準>>>

在平常項目中，我們會遇到這樣的業(yè)務(wù)場景：

? ? ? ? 客戶希望把自己的門店繪制在百度地圖上，通過省、市、區(qū)的選擇，然后加載不同區(qū)域下的店鋪位置。

先看看效果圖吧：

實現(xiàn)思路：

第一步：整理行政區(qū)域表：

? ? ? 要實現(xiàn)通過地區(qū)篩選來動態(tài)加載地圖，首先要有一套中國行政區(qū)域表。哪里來呢？如果你做過淘寶API接入，應(yīng)該會想到淘寶物流接口提供了一個官方的行政區(qū)域代碼，這個比較靠譜。

第二步：收集行政區(qū)域的經(jīng)緯度：

? ? ? 這個就有點麻煩了，雖然可以在百度坐標拾取系統(tǒng)一個一個的收集整理，但是3000多條記錄，是個不小的體力活。于是經(jīng)過多方面的查找，找到了一份已經(jīng)由前輩整理過的經(jīng)緯度表；再結(jié)合第一步里的區(qū)域，最終得到了一份數(shù)據(jù)相對齊全的行政區(qū)域表。（建表SQL語句見文末下載地址）

第三步：制作地區(qū)篩選頁面：

? ? ? 地區(qū)篩選，三級聯(lián)動，為了方便演示，以及區(qū)域表更新的幾率不大，將區(qū)域表內(nèi)容輸入成一個json串，保存為area.js文件，大概內(nèi)容像這樣：

? ? ??var areas = [
? ? ? {"code":"110000","parentCode":"0","level":"1","name":"北京市","latitude":"39.929986","longitude":"116.395645"},
? ? ? {"code":"110100","parentCode":"110000","level":"2","name":"市轄區(qū)","latitude":"","longitude":""},
? ? ? {"code":"110101","parentCode":"110100","level":"3","name":"東城區(qū)","latitude":"39.938574","longitude":"116.421885"},
? ? ? ? ...

? ? ? ];

? ? ?有了數(shù)據(jù)源，再來做頁面就方便多了。

HTML部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>區(qū)域地圖</title><link href="style/demo.css" rel="stylesheet" type="text/css" /><script src="scripts/area.js" type="text/javascript"></script><script src="scripts/jquery-1.9.1.js" type="text/javascript"></script><script src="scripts/demo.js" type="text/javascript"></script> </head> <body><div class="demo_main"><fieldset class="demo_title">在線區(qū)域地圖<span class="author">資源提供者：清山博客 ??[2015年4月26日11:38:45]</span></fieldset><fieldset class="demo_content"><div>省份：<select name="province"></select>城市：<select name="city"></select>縣區(qū)：<select name="county"></select><span class="tips" style="color: green">請選擇地區(qū)</span></div><div style="min-height: 450px; margin-top: 5px; width: 100%;" id="map"></div></fieldset><script type="text/javascript">//異步調(diào)用百度js function map_load() {var load = document.createElement("script");load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";document.body.appendChild(load);}window.onload = map_load;//根據(jù)經(jīng)緯度顯示地區(qū)function loadPlace(longitude, latitude, level) {if (parseFloat(longitude) > 0 || parseFloat(latitude) > 0) {level = level || 13;//繪制地圖var map = new BMap.Map("map"); // 創(chuàng)建Map實例 var point = new BMap.Point(longitude, latitude); //地圖中心點 map.centerAndZoom(point, level); // 初始化地圖,設(shè)置中心點坐標和地圖級別。 map.enableScrollWheelZoom(true); //啟用滾輪放大縮小 //向地圖中添加縮放控件 var ctrlNav = new window.BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT,type: BMAP_NAVIGATION_CONTROL_LARGE});map.addControl(ctrlNav);//向地圖中添加縮略圖控件 var ctrlOve = new window.BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT,isOpen: 1});map.addControl(ctrlOve);//向地圖中添加比例尺控件 var ctrlSca = new window.BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});map.addControl(ctrlSca);}}</script></div> </body> </html> </span> JS部分（demo.js）：

<span style="font-size:12px;">$(function() {//設(shè)置默認值var option = $("<option>").val("0").text("==請選擇省份==");$("[name='province']").append(option);option = $("<option>").val("0").text("==請選擇城市==");$("[name='city']").append(option);option = $("<option>").val("0").text("==請選擇縣區(qū)==");$("[name='county']").append(option);//綁定省份for (var i = 0; i < areas.length; i++) {if (parseInt(areas[i].level) == 1) {option = $("<option>").val(areas[i].code).text(areas[i].name);$("[name='province']").append(option);}}//城市聯(lián)動$("[name='province']").bind("change", function() {var code = parseInt($(this).val());//加載城市if (code > 0) {$("[name='city'] option:gt(0)").remove();for (var i = 0; i < areas.length; i++) {if (parseInt(areas[i].parentCode) == code) {option = $("<option>").val(areas[i].code).text(areas[i].name);$("[name='city']").append(option);}}}//繪制地圖if (code > 0) {for (var i = 0; i < areas.length; i++) {if (parseInt(areas[i].code) == code) {var longitude = areas[i].longitude;var latitude = areas[i].latitude;loadPlace(longitude, latitude, 10);break;}}}});//城市聯(lián)動$("[name='city']").bind("change", function() {var code = parseInt($(this).val());//加載縣區(qū)if (code > 0) {$("[name='county'] option:gt(0)").remove();for (var i = 0; i < areas.length; i++) {if (parseInt(areas[i].parentCode) == code) {option = $("<option>").val(areas[i].code).text(areas[i].name);$("[name='county']").append(option);}}}//繪制地圖if (code > 0) {for (var i = 0; i < areas.length; i++) {if (parseInt(areas[i].code) == code) {var longitude = areas[i].longitude;var latitude = areas[i].latitude;loadPlace(longitude, latitude, 12);break;}}}});//縣區(qū)聯(lián)動$("[name='county']").bind("change", function() {var code = parseInt($(this).val());//繪制地圖if (code > 0) {for (var i = 0; i < areas.length; i++) {if (parseInt(areas[i].code) == code) {var longitude = areas[i].longitude;var latitude = areas[i].latitude;loadPlace(longitude, latitude);break;}}}});});</span> 說明都在代碼注釋里了，應(yīng)該很容易理解，這里就不重復(fù)了。

完整Demo下載

百度云網(wǎng)盤

在線預(yù)覽

轉(zhuǎn)載于:https://my.oschina.net/zhangqs008/blog/712769

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的百度地图-省市县联动加载地图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： JqueryEasyUI 解决IE下da
下一篇： Spring-AOP实践 - 统计访问时