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

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

news 2025/12/18 20:09:37

在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中&#xff0c;难免会遇到使用地图展示的功能&#xff0c;但是百度谷歌这些收费的显然对于大部分开源节流的开发者是不愿意接受的&#xff0c;所以天地图则是最佳选择。 此篇文章&#xff0c;详细的实现地图展示功能&#xff0c;并且可以自定义容器宽高&#xff0c;还可…...

编程日记 2024/10/24 12:01:57

思科网络设备命令

一、交换机巡检命令 接口和流量状态 show interface stats&#xff1a;查看所有接口当前流量。show interface summary&#xff1a;查看所有接口当前状态和流量。show interface status&#xff1a;查看接口状态及可能的错误。show interface | include errors | FastEthernet …...

编程日记 2024/10/24 12:00:55

Egg.js使用ejs快速自动生成resetful风格的CRUD接口

目前的插件能够自动生成egg的crud的都不太好用 我们自己写一个吧 ejs模块 也方便定制 安装依赖 npm install ejs --save ejs 是一个简单易用的模板引擎&#xff0c;常用于 Node.js 应用程序中 在项目根目录下创建 template/controller.ejs 模板文件 use strict;const Co…...

编程日记 2024/10/24 11:58:52

自动化抖音点赞取消脚本批量处理

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…...

编程日记 2024/10/24 11:57:49

基于YOLOv8深度学习的智能车牌检测与识别系统【python源码+Pyqt5界面+数据集+训练代码】目标检测、深度学习实战

背景及意义 智能车牌检测与识别系统通过使用最新的YOLOv8与PaddleOCR算法能够迅速、准确地在多种环境下实现实时车牌的检测和识别。本文基于YOLOv8深度学习框架&#xff0c;通过16770张图片&#xff0c;训练了一个进行车牌检测模型,可以检测蓝牌与绿牌,然后对检测到的车牌使用O…...

编程日记 2024/10/24 11:56:46

qt QGraphicsGridLayout详解

一、概述 QGraphicsGridLayout是Qt框架中用于在QGraphicsScene中布置图形项的一个布局管理器。它类似于QWidget中的QGridLayout&#xff0c;但主要处理的是QGraphicsItem和QGraphicsWidget等图形项。通过合理设置网格位置、伸缩因子和尺寸&#xff0c;可以实现复杂而灵活的布局…...

编程日记 2024/10/24 11:55:43

数字处理系列

&#xff08;1&#xff09;将数字转化成中文的过滤器 <template><div><p>数字转中文&#xff1a;{{ 110 | numberToChinese }}</p></div></template><script>export default {filters: {numberToChinese(num) {const chineseNums …...

编程日记 2024/10/24 11:52:35

基于开源Jetlinks物联网平台协议包-MQTT自定义主题数据的编解码

目录 前言 1.下载官方协议包 2.解压 3.自定义主题 4.重写解码方法 5.以下是我解析后接收到的数据 前言 最近这段时间&#xff0c;一直在用开源的Jetlinks物联网平台在学习&#xff0c;偶尔有一次机会接触到物联网设备对接&#xff0c;在协议对接的时候&#xff0c;遇到了…...

编程日记 2024/10/24 11:51:22

【Python】Python2.7升级Python3

需求背景 服务是跑在docker的容器里的&#xff0c;因此要新建image依赖环境是Ubuntu&#xff0c;老的是16.4。 步骤 先准备环境&#xff0c;因为只有你的环境上去了&#xff0c;运行代码的时候才会报错&#xff0c;这样才会把需要改的代码暴露出来。 python3.5目前也是被遗弃的…...

编程日记 2024/10/24 11:50:19

Python 内置函数 round() 详解

在 Python 编程中&#xff0c;round() 函数是一个非常实用的内置函数&#xff0c;用于对数字进行四舍五入。无论是在数据处理、财务计算还是科学计算中&#xff0c;round() 函数都能帮助我们得到所需的精确值。本文将详细介绍 round() 函数的用法和注意事项。 1. round() 函数…...

编程日记 2024/10/24 11:49:17

JavaScript入门中-流程控制语句

本文转载自&#xff1a;https://fangcaicoding.cn/article/52 大家好&#xff01;我是方才&#xff0c;目前是8人后端研发团队的负责人&#xff0c;拥有6年后端经验&3年团队管理经验&#xff0c;截止目前面试过近200位候选人&#xff0c;主导过单表上10亿、累计上100亿数据…...

编程日记 2024/10/24 11:48:16

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…...

编程日记 2024/10/24 11:47:11

十七、行为型（命令模式）

命令模式&#xff08;Command Pattern&#xff09; 概念 命令模式是一种行为型设计模式&#xff0c;它将请求封装成一个对象&#xff0c;从而使您可以使用不同的请求对客户进行参数化&#xff0c;排队请求&#xff0c;以及支持可撤销操作。通过这种模式&#xff0c;调用操作的…...

编程日记 2024/10/24 11:45:07

原材料供应商的GRS认证证书过期了怎么办？

在全球纺织和时尚产业中&#xff0c;GRS&#xff08;Global Recycle Standard&#xff0c;全球再生标准&#xff09;认证已成为衡量企业环保和可持续发展的重要指标。然而&#xff0c;当原材料供应商的GRS认证证书过期时&#xff0c;企业需迅速采取行动&#xff0c;以确保供应链…...

编程日记 2024/10/24 11:44:05

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 方法…...

编程日记 2024/10/24 11:43:01

LangChain 创始人万字科普：手把手教你设计 Agent 用户交互

LangChain 可以算是 LLM 时代做 AI 应用开发必备的框架和平台&#xff0c;从模型选择、数据库链接与各种 Agent 搭建等&#xff0c;AI 应用的搭建、运行和管理都可以在 LangChain 上进行。 某种意义上&#xff0c;LangChain 可能是最了解 Agent&#xff08;智能体&#xff09;…...

编程日记 2024/10/24 11:42:00

Docker 用例：15 种最常见的 Docker 使用方法

容器化应用程序而不是将它们托管在虚拟机上是过去几年一直流行的概念&#xff0c;使容器管理流行起来。Docker 处于这一转变的核心&#xff0c;帮助组织无缝地采用容器化技术。最近&#xff0c;Docker 用例遍布所有行业&#xff0c;无论规模大小和性质如何。 什么是Docker&…...

编程日记 2024/10/24 11:40:58

若依 RuoYi4.6.0 代码审计

环境布置&#xff1a; 到官网下载源码&#xff1a;https://github.com/yangzongzhuan/RuoYi 采用phpstudy集成数据库&#xff0c;5.7版本。JDK1.8。 IDEA打开项目&#xff0c;等待自动加载&#xff0c;修改application-druid.yml配置文件&#xff1a;数据库名&#xff0c;账…...

编程日记 2024/10/24 11:38:56

C语言入门-选择结构

在编程中&#xff0c;我们经常需要根据不同的条件执行不同的操作。C语言为此提供了几种非常实用的选择结构&#xff1a;条件运算符、逻辑运算、if语句和switch语句。接下来&#xff0c;让我们深入探讨这些重要的知识点&#xff0c;帮助你更好地理解和掌握C语言的选择结构。 1.…...

编程日记 2024/10/24 11:37:55

Legion拯救者 刃7000K-26IAB联想台式机T5 26IAB7(90SU,90SV,90SW,90SX)原厂Windows11系统镜像下载

适用机型&#xff1a;【90SW、90SX、90SU、90SV】 链接&#xff1a;https://pan.baidu.com/s/1gJ4ZwWW2orlGYoPk37M-cg?pwd4mvv 提取码&#xff1a;4mvv lenovo联想原装WIN系统自带所有驱动、出厂主题专用壁纸、系统属性联机支持标志、系统属性专属LOGO标志、Office办公软…...

编程日记 2024/10/24 11:34:52

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2025/12/17 23:21:43

Neo4j 集群管理：原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...

编程新知 2025/12/11 3:51:27

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

编程新知 2025/12/10 23:18:38

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2025/12/5 14:12:22

Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

编程新知 2025/12/4 2:32:37

Linux 中如何提取压缩文件 ？

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

编程新知 2025/12/11 7:49:52

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

编程新知 2025/10/17 2:32:49

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

编程新知 2025/11/24 9:42:16

面试高频问题

文章目录 &#x1f680; 消息队列核心技术揭秘&#xff1a;从入门到秒杀面试官1️⃣ Kafka为何能"吞云吐雾"&#xff1f;性能背后的秘密1.1 顺序写入与零拷贝&#xff1a;性能的双引擎1.2 分区并行&#xff1a;数据的"八车道高速公路"1.3 页缓存与批量处理…...

编程新知 2025/11/17 0:00:05

Vue 3 + WebSocket 实战：公司通知实时推送功能详解

&#x1f4e2; Vue 3 WebSocket 实战&#xff1a;公司通知实时推送功能详解 &#x1f4cc; 收藏 点赞 关注&#xff0c;项目中要用到推送功能时就不怕找不到了&#xff01; 实时通知是企业系统中常见的功能&#xff0c;比如&#xff1a;管理员发布通知后&#xff0c;所有用户…...

编程新知 2025/12/1 3:22:57