实现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办公软…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段： 构建阶段（Build Stage）：…...
地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波：可以用来解决所提出的地质任务的波；干扰波：所有妨碍辨认、追踪有效波的其他波。 地震勘探中，有效波和干扰波是相对的。例如，在反射波…...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：
在 HarmonyOS 应用开发中，手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力，既支持点击、长按、拖拽等基础单一手势的精细控制，也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档，…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树 浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装： 下载安装DevEco Studio 4.0（支持HarmonyOS 5）配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化： ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
C++ 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
css3笔记 （1） 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size：0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
AI书签管理工具开发全记录（十九）：嵌入资源处理
1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...
MySQL账号权限管理指南：安全创建账户与精细授权技巧
在MySQL数据库管理中，合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号？ 最小权限原则…...