在uniapp中，难免会遇到使用地图展示的功能，但是百度谷歌这些收费的显然对于大部分开源节流的开发者是不愿意接受的，所以天地图则是最佳选择。 此篇文章，详细的实现地图展示功能，并且可以自定义容器宽高，还可以定向的进行行政区边界颜色划分。你可以根据代码运行并进一步稍微改下行政区编码即可实现自己想要的效果。
代码效果如下图所示：
示例代码：
<!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");
addGeoBoundary(map);
map.enableScrollWheelZoom();
// 添加地图类型控件
const ctrl = new T.Control.MapType();
map.addControl(ctrl);
map.setMapType(window.TMAP_NORMAL_MAP);
// 添加比例尺控件
const scale = new T.Control.Scale();
map.addControl(scale);
}
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>然后再你需要展示展示地图的页面引入以下代码：
注意一定要使用iframe，不要使用web-view！！否则布局会变得很奇怪
<uni-section title="地区分布" class="item map-container" type="line">
<iframe src="/static/skymap.html" class="map-frame"></iframe>
</uni-section>
</uni-section>
样式代码：
你也可以自定义实现自己想要的效果：
<style>
.map-container {
position: relative;
}
.map-frame {
width: 100%;
height: 500rpx;
border: none;
}
</style>示例代码源自天地图：天地图API。至此地图即可以正确展示了。如果感觉还不错，点个关注收藏吧。
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » 实现uniapp天地图边界范围覆盖
发表评论 取消回复