百度地图省市级三级行政区域显示（附带点聚合标记）

一、登录百度开放平台
开放平台网址：https://lbsyun.baidu.com/

二、申请访问应用ak
路径：控制=》应用管理=》我的应用=》创建应用=》在应用类型中选择浏览器端=》提交

在这里插入图片描述
ak位置：

红框内的ak复制即可，会在后续的代码当中用到
三、创建百度地图基础页面
1、html

<!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: 900px;height:700px;overflow: hidden;margin: 0;font-family: "微软雅黑";}</style><script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=自己的ak"></script><script type="text/javascript" src="js/TextIconOverlay_min.js"></script><script type="text/javascript" src="js/MarkerClusterer_min.js"></script><title>地图展示</title></head><body><div id="allmap"></div></body>
</html>

2、js

<script type="text/javascript">var map = new BMap.Map("allmap");//设置地图的中心点的坐标var point = new BMap.Point(105, 38);// 初始化地图，设置中心点坐标和地图级别map.centerAndZoom(point, 5);
</script>

四、获取点击坐标所属省、市、区县行政名

//获取当前点击坐标所属省市区信息var geoc = new BMap.Geocoder();//省份层级var province;//市区层级var city;//区县层级var district;map.addEventListener('click', function(e) {console.log(e.point);var pt = e.point;console.log(pt);geoc.getLocation(pt, function(res) {province = res.addressComponents.province;city = res.addressComponents.city;district = res.addressComponents.district;//获取当前页面地图层级var zoom = map.getZoom();//判断地图层级，并进入相对应的绘画行政区域的方法if (zoom == 5) {provinceArea(province);} else if (zoom == 7) {cityArea(city);} else if (zoom == 9) {districtArea(district);}})});

五、根据鼠标点击位置显示省级行政单位

function provinceArea(cityName) {var bdary = new BMap.Boundary();bdary.get(cityName, function(rs) { //获取行政区域map.clearOverlays(); //清除地图覆盖物//思路：利用行政区划点的集合与外围自定义东南西北形成一个环形遮罩层//1.获取选中行政区划边框点的集合rs.boundaries[0]var list = rs.boundaries;var num = "";var max = list[0];for (var i = 1; i < list.length; i++) {if (list[i].length > max.length) {max = list[i];}}var strs = new Array();strs = max.split(";");var ENWS = "";for (var i = 0; i < strs.length; i++) {ENWS += strs[i] + ";"}//2.自定义外围边框点的集合var E_JW = "170.672126, 39.623555;"; //东var EN_JW = "170.672126, 81.291804;"; //东北角var N_JW = "105.913641, 81.291804;"; //北var NW_JW = "-169.604276,  81.291804;"; //西北角var W_JW = "-169.604276, 38.244136;"; //西var WS_JW = "-169.604276, -68.045308;"; //西南角var S_JW = "114.15563, -68.045308;"; //南var SE_JW = "170.672126, -68.045308 ;"; //东南角//3.添加环形遮罩层var ply1 = new BMap.Polygon(ENWS + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + N_JW + EN_JW + E_JW, {strokeColor: "none",strokeOpacity: 0,fillColor: "#00ffff",strokeOpacity: 0.5,fillOpacity: "1"}); //建立多边形覆盖物console.log(ply1);map.addOverlay(ply1); //遮罩物是半透明的，如果需要纯色可以多添加几层//4. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层var ply = new BMap.Polygon(max, {strokeWeight: 3,strokeColor: "#064fa0",fillColor: ""});map.addOverlay(ply);map.setViewport(ply.getPath()); //调整视野//设置地图层级map.setZoom(7);});}

六、根据坐标点位显示市级行政区域（此方法依托于省级地图）

function cityArea(rank) {var bdary = new BMap.Boundary();bdary.get(city, function(rs) { //获取行政区域map.clearOverlays(); //清除地图覆盖物//思路：利用行政区划点的集合与外围自定义东南西北形成一个环形遮罩层//1.获取选中行政区划边框点的集合rs.boundaries[0]var list = rs.boundaries;var num = "";var max = list[0];for (var i = 1; i < list.length; i++) {if (list[i].length > max.length) {max = list[i];}}var strs = new Array();strs = max.split(";");var ENWS = "";for (var i = 0; i < strs.length; i++) {ENWS += strs[i] + ";"}//2.自定义外围边框点的集合var E_JW = "170.672126, 39.623555;"; //东var EN_JW = "170.672126, 81.291804;"; //东北角var N_JW = "105.913641, 81.291804;"; //北var NW_JW = "-169.604276,  81.291804;"; //西北角var W_JW = "-169.604276, 38.244136;"; //西var WS_JW = "-169.604276, -68.045308;"; //西南角var S_JW = "114.15563, -68.045308;"; //南var SE_JW = "170.672126, -68.045308 ;"; //东南角//3.添加环形遮罩层var ply1 = new BMap.Polygon(ENWS + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + N_JW + EN_JW + E_JW, {strokeColor: "none",strokeOpacity: 0,fillColor: "#00ffff",strokeOpacity: 0.5,fillOpacity: "1"}); //建立多边形覆盖物console.log(ply1);map.addOverlay(ply1); //遮罩物是半透明的，如果需要纯色可以多添加几层//4. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层var ply = new BMap.Polygon(max, {strokeWeight: 3,strokeColor: "#064fa0",fillColor: ""});map.addOverlay(ply);map.setViewport(ply.getPath()); //调整视野//设置地图层级map.setZoom(9);});}

七、根据鼠标点击位置显示县级行政单位（此方法依托于市级地图）

function districtArea(rank) {var bdary = new BMap.Boundary();bdary.get(district, function(rs) { //获取行政区域map.clearOverlays(); //清除地图覆盖物//思路：利用行政区划点的集合与外围自定义东南西北形成一个环形遮罩层//1.获取选中行政区划边框点的集合rs.boundaries[0]var list = rs.boundaries;var num = "";var max = list[0];for (var i = 1; i < list.length; i++) {if (list[i].length > max.length) {max = list[i];}}var strs = new Array();strs = max.split(";");var ENWS = "";for (var i = 0; i < strs.length; i++) {ENWS += strs[i] + ";"}//2.自定义外围边框点的集合var E_JW = "170.672126, 39.623555;"; //东var EN_JW = "170.672126, 81.291804;"; //东北角var N_JW = "105.913641, 81.291804;"; //北var NW_JW = "-169.604276,  81.291804;"; //西北角var W_JW = "-169.604276, 38.244136;"; //西var WS_JW = "-169.604276, -68.045308;"; //西南角var S_JW = "114.15563, -68.045308;"; //南var SE_JW = "170.672126, -68.045308 ;"; //东南角//3.添加环形遮罩层var ply1 = new BMap.Polygon(ENWS + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + N_JW + EN_JW + E_JW, {strokeColor: "none",strokeOpacity: 0,fillColor: "#00ffff",strokeOpacity: 0.5,fillOpacity: "1"}); //建立多边形覆盖物console.log(ply1);map.addOverlay(ply1); //遮罩物是半透明的，如果需要纯色可以多添加几层//4. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层var ply = new BMap.Polygon(max, {strokeWeight: 3,strokeColor: "#064fa0",fillColor: ""});map.addOverlay(ply);map.setViewport(ply.getPath()); //调整视野});}

八、聚合点位标记点

var markers = [];var pt = null;var i = 0;var w = [{p: new BMap.Point(116.480945, 39.953416)}, {p: new BMap.Point(116.407503, 39.984104)}, {p: new BMap.Point(116.497502, 39.908802)}, {p: new BMap.Point(116.373514, 40.040417)}, {p: new BMap.Point(116.380945, 39.953416)}, {p: new BMap.Point(116.307503, 39.984104)}, {p: new BMap.Point(116.397502, 39.908802)}, {p: new BMap.Point(98.407503, 39.984104)}, {p: new BMap.Point(98.407503, 39.984104)}];for (; i < w.length; i++) {pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);pt = w[i].p;markers.push(new BMap.Marker(pt));}//最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。var markerClusterer = new BMapLib.MarkerClusterer(map, {markers: markers});

九、效果展示
中国地图（聚合效果）
在这里插入图片描述
省

市

区县

以上为当前效果，还在优化中，有什么不足之处还望各位多多指教。

百度地图省市级三级行政区域显示（附带点聚合标记）

Published by

风君子

发表回复取消回复

Published by

风君子

发表回复 取消回复

发表回复取消回复