实现uniapp天地图边界范围覆盖

前言：

在uniapp中，难免会遇到使用地图展示的功能，但是百度谷歌这些收费的显然对于大部分开源节流的开发者是不愿意接受的，所以天地图则是最佳选择。此篇文章，详细的实现地图展示功能，并且可以自定义容器宽高，还可以定向的进行行政区边界颜色划分。你可以根据代码运行并进一步稍微改下行政区编码即可实现自己想要的效果。

代码效果如下图所示：

申请天地图key：

首先申请天地图key，它是免费的，但需要你申请。

申请地址：天地图API

然后根据页面提示，自行完成【创建新应用】。即可以获取到自己需要的key，注意uniapp申请浏览器端。

然后就是编写代码，如下：

你可以放在 uni-app 项目根目录->hybrid->html 文件夹下或者直接放在 static 目录下。本文章默认放在static下，文件名skymap.html

示例代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=天地图的key"></script>
		<style>
			body {
				margin: 0;
				padding: 0;
				overflow: hidden;
				height: 100vh;
				font-family: "Microsoft YaHei";
			}

			#viewDiv {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
		</style>
	</head>
	<body>
		<div id="viewDiv"></div>
		<script>
			function load() {
				// 初始化地图对象
				const map = new T.Map("viewDiv");
				map.centerAndZoom(new T.LngLat(116.40969, 39.89945), 12);
				map.enableScrollWheelZoom();

				// 添加地图类型控件
				const ctrl = new T.Control.MapType();
				map.addControl(ctrl);
				map.setMapType(window.TMAP_NORMAL_MAP);

				// 添加鹰眼控件
				const miniMap = new T.Control.OverviewMap({
					isOpen: false,
					size: new T.Point(150, 150)
				});
				map.addControl(miniMap);

				// 添加比例尺控件
				const scale = new T.Control.Scale();
				map.addControl(scale);

				addGeoBoundary(map);
			}

			function addGeoBoundary(map) {
				fetch('https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=520322')
					.then(response => response.json())
					.then(data => {
						const coordinates = data.features[0].geometry.coordinates;
						const centroid = data.features[0].properties.centroid;

						// 设置地图中心为该行政区域的质心
						map.centerAndZoom(new T.LngLat(centroid[0], centroid[1]), 8);

						coordinates.forEach(polygon => {
							polygon.forEach(boundary => {
								const boundaryPolygon = new T.Polygon(boundary.map(coord => new T.LngLat(
									coord[0], coord[1])), {
									color: "#7C7BF6",
									weight: 1,
									opacity: 0.7,
									fillColor: "#ABAAF3",
									fillOpacity: 0.1
								});

								boundaryPolygon.addEventListener("mouseover", () => {
									boundaryPolygon.setFillColor("#ABAAF3");
									boundaryPolygon.setFillOpacity(0.6);
								});

								boundaryPolygon.addEventListener("mouseout", () => {
									boundaryPolygon.setFillColor("#DCDBF0");
									boundaryPolygon.setFillOpacity(0.6);
								});

								map.addOverLay(boundaryPolygon);
							});
						});
					})
					.catch(error => console.error('Error fetching GeoJSON:', error));
			}

			load();
		</script>
	</body>
</html>

然后再你需要展示展示地图的页面引入以下代码：

javascript 复制代码

<uni-section title="地区分布" class="item map-container" type="line">
			<iframe src="/static/skymap.html" class="map-frame"></iframe>
		</uni-section>
		</uni-section>

样式代码：

你也可以自定义实现自己想要的效果：

html 复制代码

<style>
	.map-container {
		position: relative;
	}

	.map-frame {
		width: 100%;
		height: 500rpx;
		border: none;
	}
</style>

至此地图即可以正确展示了。如果感觉还不错，点个关注收藏吧。