前言：
在uniapp中，难免会遇到使用地图展示的功能，但是百度谷歌这些收费的显然对于大部分开源节流的开发者是不愿意接受的，所以天地图则是最佳选择。 此篇文章，详细的实现地图展示功能，并且可以自定义容器宽高，还可以定向的进行行政区边界颜色划分。你可以根据代码运行并进一步稍微改下行政区编码即可实现自己想要的效果。
代码效果如下图所示：
详细代码100%复制可用直接搞定
申请天地图key：
首先申请天地图key，它是免费的，但需要你申请。
申请地址： 天地图API
然后根据页面提示，完成【登录/注册】,进入【个人中心】,自行完成【创建新应用】。即可以获取到自己需要的key，注意uniapp申请浏览器端。
然后就是编写代码，如下：
你可以放在 uni-app 项目根目录->hybrid->html 文件夹下或者直接放在 static 目录下。本文章默认放在static下，文件名skymap.html
示例代码：
<!DOCTYPE html>
<html lang="en"><head><script src="http://api.tianditu.gov.cn/api?v=4.0&tk=替换成你自己的天地图key"></script></head><body><!-- 显示地图的DOM节点 --><view id="viewDiv" style="width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;position: absolute;top: 0;left: 0;"></view><script>function load() {var T = window.T;var imageURL = 'http://t0.tianditu.gov.cn/vec_w/wmts?' +'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' +'&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=替换成你自己的天地图key';var lay = new T.TileLayer(imageURL, {minZoom: 1,maxZoom: 16});var config = {layers: [lay]};this.map = new T.Map('viewDiv', config); // 地图实例this.map.enableScrollWheelZoom(); //允许鼠标滚轮缩放地图// 创建地图图层对象let mapTypeSelect = [{'title': '地图','icon': 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png','layer': window.TMAP_NORMAL_MAP},{'title': '卫星','icon': ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png','layer': window.TMAP_SATELLITE_MAP},{'title': '卫星混合','icon': 'api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png','layer': window.TMAP_HYBRID_MAP},{'title': '地形','icon': ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrain.png','layer': window.TMAP_TERRAIN_MAP},{'title': '地形混合','icon': ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrainpoi.png','layer': window.TMAP_TERRAIN_HYBRID_MAP}];var ctrl = new T.Control.MapType({mapTypes: mapTypeSelect});this.map.addControl(ctrl);this.map.setMapType(window.TMAP_NORMAL_MAP); addGeoBoundary(this.map);}function addGeoBoundary(map) {fetch('https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=410500').then(response => response.json()).then(data => {var coordinates = data.features[0].geometry.coordinates;var centroid = data.features[0].properties.centroid;// 将地图中心设置为该行政区域的质心var centerLngLat = new T.LngLat(centroid[0], centroid[1]);this.map.centerAndZoom(centerLngLat, 8); //修改这里1-16即可调整地图首屏的大小coordinates.forEach(polygon => {polygon.forEach(boundary => {var boundaryPolygon = new T.Polygon(boundary.map(function(coord) {return new T.LngLat(coord[0], coord[1]);}), {color: "#7C7BF6",weight: 1,opacity: 0.7,fillColor: "#ABAAF3",fillOpacity: 0.1});boundaryPolygon.addEventListener("mouseover", function() {boundaryPolygon.setFillColor("#ABAAF3");boundaryPolygon.setFillOpacity(0.6);});boundaryPolygon.addEventListener("mouseout", function() {boundaryPolygon.setFillColor("#DCDBF0");boundaryPolygon.setFillOpacity(0.6);});map.addOverLay(boundaryPolygon);});});}).catch(error => console.error('Error fetching GeoJSON:', error));}load();</script></body>
</html>然后再你需要展示展示地图的页面引入以下代码：
<uni-section title="地区分布" class="item map-container" type="line"><iframe src="/static/skymap.html" class="map-frame"></iframe></uni-section></uni-section><script>
data() {return {webviewStyles: {progress: {color: '#FF3333'},width: '100%', height: '300px' },},}
</script>样式代码：
你也可以自定义实现自己想要的效果：
<style>.map-container {position: relative;}.map-frame {width: 100%;height: 500rpx;border: none;}
</style>至此地图即可以正确展示了。如果感觉还不错，点个关注收藏吧。
)
