调用百度api实现，只显示山东省的地图

最新推荐文章于 2023-04-25 16:49:55 发布

努力站桩的奶酪呦

最新推荐文章于 2023-04-25 16:49:55 发布

阅读量529

点赞数

文章标签：百度地图API 热力图行政区划 JavaScript 地图应用

本文链接：https://blog.csdn.net/liuli0927/article/details/126895420

版权

<font size="" color="">
	<!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" />
			<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key">
			</script>
			<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/3.0/src/Heatmap_min.js">
			</script>
			<title>热力图功能-tianjiangnan</title>
			<style type="text/css">
				ul,
				li {
					list-style: none;
					margin: 0;
					padding: 0;
					float: left;
				}

				html {
					height: 100%
				}

				body {
					height: 100%;
					margin: 0px;
					padding: 0px;
					font-family: "微软雅黑";
				}

				#container {
					height: 900px;
					width: 500px;
				}

				#r-result {
					width: 100%;
				}
			</style>
		</head>
		<body>
			<div id="container"></div>
		</body>
	</html>
	<script type="text/javascript">
		// 创建地图实例
		var map = new BMap.Map("container");
		//设置地图的中心点如合肥的坐标
		var point = new BMap.Point(117.17, 31.52);
		// 初始化地图，设置中心点坐标和地图级别
		map.centerAndZoom(point, 8);
		// 允许滚轮缩放
		map.enableScrollWheelZoom();
		//添加缩略地图控件
		map.addControl(new BMap.OverviewMapControl());
		map.setMapType(BMAP_SATELLITE_MAP);
		function addMapOverlay(cityName) {
			let bdary = new BMap.Boundary();
			bdary.get(cityName, rs => { //获取行政区域

				let EN_JW = "180, 90;"; //东北角
				let NW_JW = "-180, 90;"; //西北角
				let WS_JW = "-180, -90;"; //西南角
				let SE_JW = "180, -90;"; //东南角
				// max length index
				let maxIndex = -1
				let maxLength = 0
				for (let i = 0; i < rs.boundaries.length; i++) {
					if (rs.boundaries[i].length > maxLength) {
						maxLength = rs.boundaries[i].length
						maxIndex = i
					}
				}

				// 添加环形遮罩层(圈出最大区域，剩余遮罩)
				let ply1 = new BMap.Polygon(rs.boundaries[maxIndex] + ';' + rs.boundaries[maxIndex].split(";")[0] +
					';' + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, {
						strokeColor: "none",
						fillColor: "#000",
						fillOpacity: 1,
						strokeOpacity: 0.5
					}
				);
				// 建立多边形覆盖物
				this.map.addOverlay(ply1);
				// 添加边界
				var pointArray = [];
				for (var i = 0; i < rs.boundaries.length; i++) {
					var ply = new BMap.Polygon(rs.boundaries[i], {
						strokeWeight: 3,
						strokeColor: "#ffff00",
						fillColor: ""
					}); //建立多边形覆盖物
					map.addOverlay(ply); //添加覆盖物
					pointArray = pointArray.concat(ply.getPath());
				}
				map.setViewport(pointArray);
			});
		}
		addMapOverlay("山东")
	</script>
</font>