实现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。至此地图即可以正确展示了。如果感觉还不错，点个关注收藏吧。
相关文章：
实现uniapp天地图边界范围覆盖
在uniapp中，难免会遇到使用地图展示的功能，但是百度谷歌这些收费的显然对于大部分开源节流的开发者是不愿意接受的，所以天地图则是最佳选择。 此篇文章，详细的实现地图展示功能，并且可以自定义容器宽高，还可…...
思科网络设备命令
一、交换机巡检命令 接口和流量状态 show interface stats：查看所有接口当前流量。show interface summary：查看所有接口当前状态和流量。show interface status：查看接口状态及可能的错误。show interface | include errors | FastEthernet …...
Egg.js使用ejs快速自动生成resetful风格的CRUD接口
目前的插件能够自动生成egg的crud的都不太好用 我们自己写一个吧 ejs模块 也方便定制 安装依赖 npm install ejs --save ejs 是一个简单易用的模板引擎，常用于 Node.js 应用程序中 在项目根目录下创建 template/controller.ejs 模板文件 use strict;const Co…...
自动化抖音点赞取消脚本批量处理
🌟 前言 欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍 &#x…...
基于YOLOv8深度学习的智能车牌检测与识别系统【python源码+Pyqt5界面+数据集+训练代码】目标检测、深度学习实战
背景及意义 智能车牌检测与识别系统通过使用最新的YOLOv8与PaddleOCR算法能够迅速、准确地在多种环境下实现实时车牌的检测和识别。本文基于YOLOv8深度学习框架，通过16770张图片，训练了一个进行车牌检测模型,可以检测蓝牌与绿牌,然后对检测到的车牌使用O…...
qt QGraphicsGridLayout详解
一、概述 QGraphicsGridLayout是Qt框架中用于在QGraphicsScene中布置图形项的一个布局管理器。它类似于QWidget中的QGridLayout，但主要处理的是QGraphicsItem和QGraphicsWidget等图形项。通过合理设置网格位置、伸缩因子和尺寸，可以实现复杂而灵活的布局…...
数字处理系列
（1）将数字转化成中文的过滤器 <template><div><p>数字转中文：{{ 110 | numberToChinese }}</p></div></template><script>export default {filters: {numberToChinese(num) {const chineseNums …...
基于开源Jetlinks物联网平台协议包-MQTT自定义主题数据的编解码
目录 前言 1.下载官方协议包 2.解压 3.自定义主题 4.重写解码方法 5.以下是我解析后接收到的数据 前言 最近这段时间，一直在用开源的Jetlinks物联网平台在学习，偶尔有一次机会接触到物联网设备对接，在协议对接的时候，遇到了…...
【Python】Python2.7升级Python3
需求背景 服务是跑在docker的容器里的，因此要新建image依赖环境是Ubuntu，老的是16.4。 步骤 先准备环境，因为只有你的环境上去了，运行代码的时候才会报错，这样才会把需要改的代码暴露出来。 python3.5目前也是被遗弃的…...
 详解)
Python 内置函数 round() 详解
在 Python 编程中，round() 函数是一个非常实用的内置函数，用于对数字进行四舍五入。无论是在数据处理、财务计算还是科学计算中，round() 函数都能帮助我们得到所需的精确值。本文将详细介绍 round() 函数的用法和注意事项。 1. round() 函数…...
JavaScript入门中-流程控制语句
本文转载自：https://fangcaicoding.cn/article/52 大家好！我是方才，目前是8人后端研发团队的负责人，拥有6年后端经验&3年团队管理经验，截止目前面试过近200位候选人，主导过单表上10亿、累计上100亿数据…...
kconfig语法(一)
一、安装Kconfiglib python -m pip install windows-curses python -m pip install kconfiglib二、使用样例 ①创建kconfig文件。 ②在kconfig文件添加内容: config KCONFIG_DEMO_ITEM1boolprompt "demonstate item1 for bool learning"config KCONFIG_DEMO_ITE…...
十七、行为型（命令模式）
命令模式（Command Pattern） 概念 命令模式是一种行为型设计模式，它将请求封装成一个对象，从而使您可以使用不同的请求对客户进行参数化，排队请求，以及支持可撤销操作。通过这种模式，调用操作的…...
原材料供应商的GRS认证证书过期了怎么办？
在全球纺织和时尚产业中，GRS（Global Recycle Standard，全球再生标准）认证已成为衡量企业环保和可持续发展的重要指标。然而，当原材料供应商的GRS认证证书过期时，企业需迅速采取行动，以确保供应链…...
C++编程：实现一个基于原始指针的环形缓冲区（RingBuffer）缓存串口数据
文章目录 0. 引言1. 使用示例2. 流程图2.1 追加数据流程2.2 获取空闲块流程2.3 处理特殊字符流程2.4 释放块流程2.5 获取下一个使用块流程 3. 代码详解3.1 Block 结构体3.2 RingBuffer 类3.3 主要方法解析append 方法currentUsed 和 currentUsing 方法release 方法nextUsed 方法…...
LangChain 创始人万字科普：手把手教你设计 Agent 用户交互
LangChain 可以算是 LLM 时代做 AI 应用开发必备的框架和平台，从模型选择、数据库链接与各种 Agent 搭建等，AI 应用的搭建、运行和管理都可以在 LangChain 上进行。 某种意义上，LangChain 可能是最了解 Agent（智能体）…...
Docker 用例：15 种最常见的 Docker 使用方法
容器化应用程序而不是将它们托管在虚拟机上是过去几年一直流行的概念，使容器管理流行起来。Docker 处于这一转变的核心，帮助组织无缝地采用容器化技术。最近，Docker 用例遍布所有行业，无论规模大小和性质如何。 什么是Docker&…...
若依 RuoYi4.6.0 代码审计
环境布置： 到官网下载源码：https://github.com/yangzongzhuan/RuoYi 采用phpstudy集成数据库，5.7版本。JDK1.8。 IDEA打开项目，等待自动加载，修改application-druid.yml配置文件：数据库名，账…...
C语言入门-选择结构
在编程中，我们经常需要根据不同的条件执行不同的操作。C语言为此提供了几种非常实用的选择结构：条件运算符、逻辑运算、if语句和switch语句。接下来，让我们深入探讨这些重要的知识点，帮助你更好地理解和掌握C语言的选择结构。 1.…...
Legion拯救者 刃7000K-26IAB联想台式机T5 26IAB7(90SU,90SV,90SW,90SX)原厂Windows11系统镜像下载
适用机型：【90SW、90SX、90SU、90SV】 链接：https://pan.baidu.com/s/1gJ4ZwWW2orlGYoPk37M-cg?pwd4mvv 提取码：4mvv lenovo联想原装WIN系统自带所有驱动、出厂主题专用壁纸、系统属性联机支持标志、系统属性专属LOGO标志、Office办公软…...
AWS CloudFormation模板定制终极指南：从模板到个性化部署的完整教程
AWS CloudFormation模板定制终极指南：从模板到个性化部署的完整教程 【免费下载链接】aws-cloudformation-templates awslabs/aws-cloudformation-templates: 是一个包含各种 AWS CloudFormation 模板的存储库。适合查找和学习 AWS CloudFormation 模板的示例&#…...
终极指南：使用OpenCore Legacy Patcher让旧Mac焕发新生，完整支持最新macOS
终极指南：使用OpenCore Legacy Patcher让旧Mac焕发新生，完整支持最新macOS 【免费下载链接】OpenCore-Legacy-Patcher 体验与之前一样的macOS 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 你是否有一台性能依然强…...
5步搞定开源工具试用限制解除方案：设备标识符重置完整指南
5步搞定开源工具试用限制解除方案：设备标识符重置完整指南 【免费下载链接】go-cursor-help 解决Cursor在免费订阅期间出现以下提示的问题: Youve reached your trial request limit. / Too many free trial accounts used on this machine. Please upgrade to pro.…...
大比表氧化铈：催化与净化的新利器
你可能没注意到，一种微小的氧化物粉末，却在工业和环保领域发挥着重要作用。它就是大比表氧化铈。它的独特之处在于每克材料拥有非常大的表面积，可达上百平方米，这意味着它能与更多的气体或反应物接触，从而提升化学反应…...
Harmonyos应用实例226：复数的三角形式与运算
8. 复数的三角形式与运算 功能简介：将复数表示为三角形式，计算模和幅角，支持复数的乘法、除法运算的几何意义。通过复平面可视化展示复数的三角形式和运算过程，帮助学生理解复数的三角表示和运算规则。 ArkTS代码： @Entry @Component struct ComplexTrigonometric {@St…...
革新华硕笔记本性能控制：轻量级开源工具GHelper全面解析
革新华硕笔记本性能控制：轻量级开源工具GHelper全面解析 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops. Control tool for ROG Zephyrus G14, G15, G16, M16, Flow X13, Flow X16, TUF, Strix, Scar and other models 项目地…...
Wan2.2-I2V-A14B开发者实践：基于FastAPI封装私有视频生成服务
Wan2.2-I2V-A14B开发者实践：基于FastAPI封装私有视频生成服务 1. 镜像概述与核心优势 Wan2.2-I2V-A14B是一款专为文本到视频生成任务优化的私有部署镜像，特别针对RTX 4090D 24GB显存显卡进行了深度优化。这个镜像将帮助开发者快速搭建私有视频生成服务…...
智能物流分拣破局：越疆协作分拣机器人高效升级指南
在电商、快递行业的高速发展下，物流分拣的压力越来越大，但长期以来，中小物流企业的分拣面临 “两难” 困境：人工分拣招工难、效率低，错分率达 1% 以上，大促期间更是人手不足；而传统的交叉带分拣…...
腾讯地图API实战：5分钟搞定经纬度录入与地图选点功能（Vue版）
腾讯地图API实战：5分钟搞定经纬度录入与地图选点功能（Vue版） 在当今的Web开发中，地图功能已成为许多应用的标配需求。无论是电商平台的店铺定位，还是社交应用的位置分享，甚至是企业内部系统的区域管理&…...
如何从视频中智能提取PPT幻灯片：终极免费工具使用指南
如何从视频中智能提取PPT幻灯片：终极免费工具使用指南 【免费下载链接】extract-video-ppt extract the ppt in the video 项目地址: https://gitcode.com/gh_mirrors/ex/extract-video-ppt 在当今数字化教学和远程办公的时代，视频中常常包含重要…...