当前位置: 首页 > news >正文

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

在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。至此地图即可以正确展示了。如果感觉还不错,点个关注收藏吧。

http://www.lryc.cn/news/467496.html

相关文章:

  • 思科网络设备命令
  • Egg.js使用ejs快速自动生成resetful风格的CRUD接口
  • 自动化抖音点赞取消脚本批量处理
  • 基于YOLOv8深度学习的智能车牌检测与识别系统【python源码+Pyqt5界面+数据集+训练代码】目标检测、深度学习实战
  • qt QGraphicsGridLayout详解
  • 数字处理系列
  • 基于开源Jetlinks物联网平台协议包-MQTT自定义主题数据的编解码
  • 【Python】Python2.7升级Python3
  • Python 内置函数 round() 详解
  • JavaScript入门中-流程控制语句
  • kconfig语法(一)
  • 十七、行为型(命令模式)
  • 原材料供应商的GRS认证证书过期了怎么办?
  • C++编程:实现一个基于原始指针的环形缓冲区(RingBuffer)缓存串口数据
  • LangChain 创始人万字科普:手把手教你设计 Agent 用户交互
  • Docker 用例:15 种最常见的 Docker 使用方法
  • 若依 RuoYi4.6.0 代码审计
  • C语言入门-选择结构
  • Legion拯救者 刃7000K-26IAB联想台式机T5 26IAB7(90SU,90SV,90SW,90SX)原厂Windows11系统镜像下载
  • 代码随想录算法训练营第二十四天|Day24 回溯算法
  • vue elementui table编辑表单时,弹框增加编辑明细数据
  • springboot集成Redisson做分布式消息队列
  • 如何通过Lua语言请求接口拿到数据
  • Android 13 SystemUI 隐藏下拉快捷面板部分模块(wifi,bt,nfc等)入口
  • 自由学习记录(14)
  • 疯狂Spring Boot讲义[推荐1]
  • vue中$nextTick的作用是什么,什么时候使用
  • Redis实现全局ID生成器
  • Xshell远程连接工具详解
  • 如何在verilog设计的磁盘阵列控制器中实现不同RAID级别(如RAID 0、RAID 1等)的切换?