百度地图省市县三级联动,参考网络上的画区块代码,地区数据太多只能上传一部分,
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
chinaArea = [{"id":"801","pid":"0","shortname":"上海","name":"上海","merger_name":"中国,上海","level":"1","pinyin":"shanghai","code":"","zip_code":"","first":"S","lng":"121.472644","lat":"31.231706","index":0,"child":[{"id":"802","pid":"801","shortname":"上海","name":"上海市","merger_name":"中国,上海,上海市","level":"2","pinyin":"shanghai","code":"021","zip_code":"200000","first":"S","lng":"121.472644","lat":"31.231706","index":0,"child":[{"id":"803","pid":"802","shortname":"黄浦","name":"黄浦区","merger_name":"中国,上海,上海市,黄浦区","level":"3","pinyin":"huangpu","code":"021","zip_code":"200001","first":"H","lng":"121.49295","lat":"31.22337","index":0},{"id":"804","pid":"802","shortname":"徐汇","name":"徐汇区","merger_name":"中国,上海,上海市,徐汇区","level":"3","pinyin":"xuhui","code":"021","zip_code":"200030","first":"X","lng":"121.43676","lat":"31.18831","index":1},{"id":"805","pid":"802","shortname":"长宁","name":"长宁区","merger_name":"中国,上海,上海市,长宁区","level":"3","pinyin":"changning","code":"021","zip_code":"200050","first":"C","lng":"121.42462","lat":"31.22036","index":2},{"id":"806","pid":"802","shortname":"静安","name":"静安区","merger_name":"中国,上海,上海市,静安区","level":"3","pinyin":"jing'an","code":"021","zip_code":"200040","first":"J","lng":"121.4444","lat":"31.22884","index":3},{"id":"807","pid":"802","shortname":"普陀","name":"普陀区","merger_name":"中国,上海,上海市,普陀区","level":"3","pinyin":"putuo","code":"021","zip_code":"200333","first":"P","lng":"121.39703","lat":"31.24951","index":4}]}]}]
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<div class="pull-left" style="width:760px;border-right:1px solid #c2c2c2;position:relative;background-color: #fff;"> <div id="container" style="width:758px;height:508px;margin-top:40px;background-color: #fff;"></div> <div style="position: absolute;top:5px;left:10px;"> <!-- <input type="button" value="" style="background-color: transparent;border: none;">--> <i class="fa fa-chevron-left" id="area-back" style="padding: 0 10px;"></i> <div id="select-area" style="display:inline-block;"> <select name="area-province" id="area-province" style="padding: 3px 0;"> <option value="0">请选择省</option> </select> <span>-</span> <select name="area-city" id="area-city" style="padding: 3px 0;"> <option value="0">请选择市</option> </select> <span>-</span> <select name="area-area" id="area-area" style="padding: 3px 0;"> <option value="0">请选择县</option> </select> </div> <!-- <span>您已选中:</span> <span id="area-selected" style="color:#ee4253;font-size: 12px;"></span>--> </div> </div>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
var colors = [ '#f2d4e9', '#efc6e3', '#ebb8dc', '#dfafd2', '#dedaee', '#d3cee7', '#c9c1e3', '#beb8d7', '#edddd9', '#e7d1ce', '#e2c4bf', '#d7bbb7', '#f8e2cd', '#f4d7be', '#f2cdae', '#e7c3a6', '#d8eeee', '#cde9e8', '#bfe2e1', '#b6d8d5', '#e8efda', '#e1e9cd', '#d8e3c0', '#cfd8b6', '#ebf6d1', '#e5f1c4', '#ddeeb5', '#d4e2ac', '#f5f4d1', '#f1efc4', '#eceab4', '#e0ddab', '#d8e8ee', '#cce2e8', '#bfd9e1', '#b6d1d7' ]; /** * 返回下一个颜色 */ var colorsIndex = 0; function colorsNext(area) { if (!area) { if (++colorsIndex > colors.length) colorsIndex = 0; return colors[colorsIndex]; }else{ var areaIndex = 0; if(area.index <= colors.length){ areaIndex = area.index; } return colors[areaIndex]; } } /** * 搜索地区,必传属性level * @filterObj objcet 搜索条件对象,可用属性level、id、name、shortname、merger_name * @returns 地区 */ function filterArea(filterObj) { var result = false; for (i in chinaArea) { var province = chinaArea[i]; if (filterObj.level == 1 && (province.id == filterObj.id || province.name == filterObj.name || province.shortname == filterObj.shortname || province.merger_name == filterObj.merger_name)) { result = province; } else { for (j in chinaArea[i].child) { var city = chinaArea[i].child[j]; if (filterObj.level == 2 && (city.id == filterObj.id || city.name == filterObj.name || city.shortname == filterObj.shortname || city.merger_name == filterObj.merger_name)) { result = city; } else { for (k in chinaArea[i].child[j].child) { var area = chinaArea[i].child[j].child[k]; if (filterObj.level == 3 && (area.id == filterObj.id || area.name == filterObj.name || area.shortname == filterObj.shortname || area.merger_name == filterObj.merger_name)) { result = area; } else { continue; } } } } } } return result; } /** * 搜索地区父级,必传属性level * @filterObj objcet 搜索条件对象,可用属性level、id、name、shortname、merger_name * @returns 地区 */ function filterAreaParent(filterObj) { var result = false; for (i in chinaArea) { var province = chinaArea[i]; if (filterObj.level == 1 && (province.id == filterObj.id || province.name == filterObj.name || province.shortname == filterObj.shortname || province.merger_name == filterObj.merger_name)) { result = chinaArea; } else { for (j in chinaArea[i].child) { var city = chinaArea[i].child[j]; if (filterObj.level == 2 && (city.id == filterObj.id || city.name == filterObj.name || city.shortname == filterObj.shortname || city.merger_name == filterObj.merger_name)) { result = province; } else { for (k in chinaArea[i].child[j].child) { var area = chinaArea[i].child[j].child[k]; if (filterObj.level == 3 && (area.id == filterObj.id || area.name == filterObj.name || area.shortname == filterObj.shortname || area.merger_name == filterObj.merger_name)) { result = city; } else { continue; } } } } } } return result; } //提示:下面的代码用jquery,所以如果有不能运行的情况请引用后尝试 //百度地图api container对应前端div名称 前端要引用2.0版本的百度地图api //需引用api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js var map = new BMap.Map("container", {enableMapClick: false}); // 创建地图实例,禁止点击地图底图 setTimeout(function(){map.setZoom(5);},1000); //设置样式 map.setMapStyle({ styleJson: [ { "featureType": "poi", "elementType": "all", "stylers": { "color": "#ffffff", "visibility": "off" } }, { "featureType": "road", "elementType": "all", "stylers": { "color": "#ffffff", "visibility": "off" } }, { "featureType": "water", "elementType": "all", "stylers": { "color": "#ffffff", "visibility": "off" } }, { "featureType": "background", "elementType": "all", "stylers": { "color": "#ffffff", "visibility": "on" } }, { "featureType": "administrative", "elementType": "all", "stylers": { "color": "#ffffff", "visibility": "off" } } ] }); //map.disableDragging();//禁止拖动 map.disableDoubleClickZoom();//禁止双击缩放 // map.enableScrollWheelZoom(true); //滚动缩放 // map.addControl(new BMap.CopyrightControl({offset: new BMap.Size(0, 0)})); var blist = []; var districtLoading = 0; var districtNameList = []; /** * 画图入口 */ function getBoundary(areas) { map.clearOverlays(); blist = []; for (i in areas) { addDistrict(areas[i]); } } /** * 添加行政区划 * @param {} districtName 行政区划名 * @returns 无返回值 */ function addDistrict(area) { var districtName = area.name; //使用计数器来控制加载过程 districtLoading++; var bdary = new BMap.Boundary(); bdary.get(districtName, function (rs) { //获取行政区域 if ($.inArray(districtName, districtNameList) >= 0) return; districtNameList.push(districtName); var count = rs.boundaries.length; //行政区域的点有多少个 if (count === 0) { districtLoading--; console.error('未能获取当前输入行政区域'); console.info(area); return; } color = colorsNext(area); for (var i = 0; i < count; i++) { blist.push({points: rs.boundaries[i], name: districtName, color: color}); } //加载完成区域点后计数器-1 districtLoading--; if (districtLoading == 0) { colorsIndex = districtLoading = districtNameList.length = 0; //全加载完成后画端点 drawBoundary(); } }); } /** * 处理选区 */ function areaClick(area) { $('#area-selected').html(area.merger_name); $('#area-back').data('area', area); if(!(!!area && !!area.child && area.child.length) && !!area.name){ console.log(area); bootbox.alert('已选择区域: ' + area.name); } if(!!area && area.level == 1){ $('#area-province').val(area.id); if(!!area.child && area.child.length){ $('#area-city').find('option:gt(0)').remove(); $('#area-area').find('option:gt(0)').remove() for(i in area.child){ var child = area.child[i]; var optionStr = '<option value="'+ child.id +'">'+ child.name +'</option>'; $('#area-city').append(optionStr); } } } if(!!area && area.level == 2){ $('#area-city').val(area.id); if(!!area.child && area.child.length){ $('#area-area').find('option:gt(0)').remove() for(i in area.child){ var child = area.child[i]; var optionStr = '<option value="'+ child.id +'">'+ child.name +'</option>'; $('#area-area').append(optionStr); } } } if(!!area && area.level == 3){ $('#area-area').val(area.id); } } /** * 返回按钮单击事件 */ $(document).on('click', '#area-back', function (e) { var $this = $(this); var area = $this.data('area'); var areaParent = false; if (area.level == 1) { areaParent = chinaArea; getBoundary(chinaArea); } else { areaParent = filterAreaParent(area); if (!!areaParent && !!areaParent.child && !!areaParent.child.length) { getBoundary(areaParent.child); } } areaClick(areaParent); }); /** * 地图鼠标事件绑定 */ function click(evt) { var targetName = evt.target.name; var area = false; if (area = filterArea({name: targetName, level: 1})) { if (!!area.child && !!area.child.length) { getBoundary(area.child); $("#area-selected-p").val(area.name); } else { console.log('已选中:' + area.merger_name); } areaClick(area); } else if (area = filterArea({name: targetName, level: 2})) { if (!!area.child && !!area.child.length) { getBoundary(area.child); $("#area-selected-c").val(area.name); } else { console.log('已选中:' + area.merger_name); } areaClick(area); } else if (area = filterArea({name: targetName, level: 3})) { $("#area-selected-a").val(area.name); console.log('已选中:' + area.merger_name); areaClick(area); } } function mouseover(evt) { evt.target.label.setZIndex(99); evt.target.label.setPosition(evt.point); evt.target.label.show(); } function mousemove(evt) { evt.target.label.setPosition(evt.point); } function mouseout(evt) { evt.target.label.hide(); } function drawBoundary() { //包含所有区域的点数组 var pointArray = []; //循环添加各闭合区域 for (var i = 0; i < blist.length; i++) { //添加显示用标签层 var label = new BMap.Label(blist[i].name, {offset: new BMap.Size(20, -10)}); label.hide(); map.addOverlay(label); //添加多边形层并显示 var ply = new BMap.Polygon(blist[i].points, { strokeWeight: 0.5, strokeColor: "#ff0000", strokeOpacity: 1, fillOpacity: 1, fillColor: blist[i].color }); //建立多边形覆盖物 ply.name = blist[i].name; ply.label = label; ply.addEventListener("click", click); //ply.addEventListener("mouseover", mouseover); //ply.addEventListener("mouseout", mouseout); //ply.addEventListener("mousemove", mousemove); map.addOverlay(ply); //添加名称标签层 var centerlabel = new BMap.Label(blist[i].name, {offset: new BMap.Size(0, 0)}); centerlabel.setStyle({ color: "#ee4253", fontSize: "10px", height: "20px", lineHeight: "15px", fontFamily: "微软雅黑", //borderRadius: "10px", borderColor:"#ee4253", border:"none", backgroundColor:"transparent" }); centerlabel.setPosition(ply.getBounds().getCenter()); map.addOverlay(centerlabel); //将点增加到视野范围内 var path = ply.getPath(); pointArray = pointArray.concat(path); } //限定显示区域,需要引用api库 var boundply = new BMap.Polygon(pointArray); BMapLib.AreaRestriction.setBounds(map, boundply.getBounds()); map.setViewport(pointArray); //调整视野 } getBoundary(chinaArea); $(function(){ for(i in chinaArea){ var area = chinaArea[i]; var optionStr = '<option value="'+ area.id +'">'+ area.name +'</option>'; $('#area-province').append(optionStr); } $(document).on('change','#area-province',function(e){ var $this = $(this); var id = $this.find('option:selected').val(); var area = filterArea({level:1,id:id}); $("#area-selected-p").val(area.name); $("#area-selected-c,#area-selected-a,#area-city,#area-area").val(""); if(!!area){ if(!!area.child && area.child.length){ $('#area-city').find('option:gt(0)').remove(); $('#area-area').find('option:gt(0)').remove() for(i in area.child){ var child = area.child[i]; var optionStr = '<option value="'+ child.id +'">'+ child.name +'</option>'; $('#area-city').append(optionStr); } getBoundary(area.child); }else{ console.log(area); bootbox.alert('已选择区域: ' + area.name); } } }); $(document).on('change','#area-city',function(e){ var $this = $(this); var id = $this.find('option:selected').val(); var area = filterArea({level:2,id:id}); $("#area-selected-c").val(area.name); if(!!area){ if(!!area.child && area.child.length){ $('#area-area').find('option:gt(0)').remove() for(i in area.child){ var child = area.child[i]; var optionStr = '<option value="'+ child.id +'">'+ child.name +'</option>'; $('#area-area').append(optionStr); } getBoundary(area.child); }else{ console.log(area); bootbox.alert('已选择区域: ' + area.name); } } }); $(document).on('change','#area-area',function(e){ var $this = $(this); var id = $this.find('option:selected').val(); var area = filterArea({level:3,id:id}); $("#area-selected-a").val(area.name); console.log(area); bootbox.alert('已选择区域: ' + area.name); }); });