组织部网站建设方案,wordpress文章页幻灯片,网店推广方案,宣传页制作在uniapp中#xff0c;难免会遇到使用地图展示的功能#xff0c;但是百度谷歌这些收费的显然对于大部分开源节流的开发者是不愿意接受的#xff0c;所以天地图则是最佳选择。 此篇文章#xff0c;详细的实现地图展示功能#xff0c;并且可以自定义容器宽高#xff0c;还可…在uniapp中难免会遇到使用地图展示的功能但是百度谷歌这些收费的显然对于大部分开源节流的开发者是不愿意接受的所以天地图则是最佳选择。 此篇文章详细的实现地图展示功能并且可以自定义容器宽高还可以定向的进行行政区边界颜色划分。你可以根据代码运行并进一步稍微改下行政区编码即可实现自己想要的效果。
代码效果如下图所示 示例代码
!DOCTYPE html
html langenheadscript srchttp://api.tianditu.gov.cn/api?v4.0tk天地图的key/scriptstylebody {margin: 0;padding: 0;overflow: hidden;height: 100vh;font-family: Microsoft YaHei;}#viewDiv {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}/style/headbodydiv idviewDiv/divscriptfunction 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?code520322).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地区分布 classitem map-container typelineiframe src/static/skymap.html classmap-frame/iframe/uni-section/uni-section样式代码
你也可以自定义实现自己想要的效果
style.map-container {position: relative;}.map-frame {width: 100%;height: 500rpx;border: none;}
/style
示例代码源自天地图天地图API。至此地图即可以正确展示了。如果感觉还不错点个关注收藏吧。
