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

于 2021-12-03 16:17:36 发布
阅读量4.5k 收藏 16
点赞数 7
分类专栏： 百度地图 聚合点位 省市级三级
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44198377/article/details/121700478
版权

百度 javascript 前端

一、登录百度开放平台
开放平台网址：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

	});

九、效果展示
中国地图（聚合效果）
在这里插入图片描述
省
在这里插入图片描述
市
在这里插入图片描述
区县
在这里插入图片描述
以上为当前效果，还在优化中，有什么不足之处还望各位多多指教。

听风，带走
关注
  • 7
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值