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

一、登录百度开放平台
开放平台网址: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. 在HTML中创建3个下拉框,分别用于显示省、市、区县。 2. 创建一个JavaScript数组,用于存储省市区县数据。 3. 给省下拉框绑定change事件,当省下拉框的值发生改变时,根据选中的省份动态生成对应的市下拉框选项。 4. 给市下拉框绑定change事件,当市下拉框的值发生改变时,根据选中的市动态生成对应的区县下拉框选项。 5. 在JavaScript中编写函数,根据选中的省市区县,获取对应的数据并填充到对应的下拉框中。 以下是示例代码: HTML部分: ``` <select id="province"></select> <select id="city"></select> <select id="district"></select> ``` JavaScript部分: ``` // 省市区县数据 var data = { "北京市": { "市辖区": ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "海淀区", "丰台区", "石景山区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区"], "县": ["密云县", "延庆县"] }, "浙江省": { "杭州市": ["上城区", "下城区", "江干区", "拱墅区", "西湖区", "滨江区", "萧山区", "余杭区", "桐庐县", "淳安县", "建德市", "富阳市", "临安市"], "宁波市": ["海曙区", "江东区", "江北区", "北仑区", "镇海区", "鄞州区", "象山县", "宁海县", "余姚市", "慈溪市", "奉化市"], "温州市": ["鹿城区", "龙湾区", "瓯海区", "洞头县", "永嘉县", "平阳县", "苍南县", "文成县", "泰顺县", "瑞安市", "乐清市"], "嘉兴市": ["南湖区", "秀洲区", "嘉善县", "海盐县", "海宁市", "平湖市", "桐乡市"], "湖州市": ["吴兴区", "南浔区", "德清县", "长兴县", "安吉县"], "绍兴市": ["越城区", "绍兴县", "新昌县", "诸暨市", "上虞市", "嵊州市"], "金华市": ["婺城区", "金东区", "武义县", "浦江县", "磐安县", "兰溪市", "义乌市", "东阳市", "永康市"], "衢州市": ["柯城区", "衢江区", "常山县", "开化县", "龙游县", "江山市"], "舟山市": ["定海区", "普陀区", "岱山县", "嵊泗县"], "台州市": ["椒江区", "黄岩区", "路桥区", "玉环县", "三门县", "天台县", "仙居县", "温岭市", "临海市"], "丽水市": ["莲都区", "青田县", "缙云县", "遂昌县", "松阳县", "云和县", "庆元县", "景宁畲族自治县", "龙泉市"] } }; // 初始化省下拉框选项 function initProvince() { var provinceSelect = document.getElementById("province"); for (var province in data) { var option = document.createElement("option"); option.value = province; option.text = province; provinceSelect.add(option); } // 触发省下拉框change事件 provinceSelect.onchange(); } // 根据省份生成市下拉框选项 function generateCity() { var provinceSelect = document.getElementById("province"); var citySelect = document.getElementById("city"); var province = provinceSelect.value; citySelect.innerHTML = ""; // 清空市下拉框选项 if (province in data) { var cities = data[province]; for (var city in cities) { var option = document.createElement("option"); option.value = city; option.text = city; citySelect.add(option); } } // 触发市下拉框change事件 citySelect.onchange(); } // 根据市生成区县下拉框选项 function generateDistrict() { var provinceSelect = document.getElementById("province"); var citySelect = document.getElementById("city"); var districtSelect = document.getElementById("district"); var province = provinceSelect.value; var city = citySelect.value; districtSelect.innerHTML = ""; // 清空区县下拉框选项 if (province in data && city in data[province]) { var districts = data[province][city]; for (var i = 0; i < districts.length; i++) { var option = document.createElement("option"); option.value = districts[i]; option.text = districts[i]; districtSelect.add(option); } } } // 绑定省下拉框change事件 document.getElementById("province").onchange = function() { generateCity(); }; // 绑定市下拉框change事件 document.getElementById("city").onchange = function() { generateDistrict(); }; // 初始化省下拉框选项 initProvince(); ``` 这个例子中,我们使用JavaScript数组存储省市区县数据,并使用三个下拉框来展示省市区县信息。当省下拉框的值发生改变时,会自动根据选中的省份生成对应的市下拉框选项;当市下拉框的值发生改变时,会自动根据选中的市生成对应的区县下拉框选项。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值