实现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办公软…...
代码随想录算法训练营第二十四天|Day24 回溯算法
93.复原IP地址 题目链接/文章讲解：https://programmercarl.com/0093.%E5%A4%8D%E5%8E%9FIP%E5%9C%B0%E5%9D%80.html 视频讲解：https://www.bilibili.com/video/BV1XP4y1U73i/ 思路 char** result; int resultTop; int segments[3]; int isValid(char* s…...
vue elementui table编辑表单时，弹框增加编辑明细数据
需求: 前端进行新增表单时，同时增加表单的明细数据。明细数据部分，通过弹框方式增加或者编辑。 效果图： 代码： <!-- 新增主表弹窗 Begin --><el-dialog:title"titleInfo"top"5vh"centerwidth"…...
springboot集成Redisson做分布式消息队列
这里演示Redisson做分布式消息队列。首先引入 Redisson依赖，官方github <dependency><groupId>org.redisson</groupId><artifactId>redisson-spring-boot-starter</artifactId><version>3.17.6</version> </dependen…...
如何通过Lua语言请求接口拿到数据
文章目录 概要http客户端通过请求下载数据 概要 当某个需求是需要在模块内请求接口拿到数据，需要使用http客户端调用接口 http客户端 LuaSOC请求接口官方文档 调用：http.request(method,url,headers,body,opts,ca_file,client_ca, client_key, clien…...
Android 13 SystemUI 隐藏下拉快捷面板部分模块(wifi,bt,nfc等)入口
frameworks/base/packages/SystemUI/src/com/android/systemui/qs/tileimpl/QSFactoryImpl.java createTileInternal(tileSpec)方法注释想隐藏的模块即可。...
自由学习记录（14）
unity操作问题 位置：子物体的位置是相对于父物体的。如果你移动父物体，子物体会保持相对于父物体的相对位置，跟着一起移动。 旋转：子物体的旋转也是相对于父物体的。旋转父物体会导致子物体围绕父物体的原点旋转。 缩放…...
疯狂Spring Boot讲义[推荐1]
《疯狂Spring Boot讲义》是2021年电子工业出版社出版的图书，作者是李刚 《疯狂Spring Boot终极讲义》不是一本介绍类似于PathVariable、MatrixVariable、RequestBody、ResponseBody这些基础注解的图书，它是真正讲解Spring Boot的图书。Spring Boot的核心…...
vue中$nextTick的作用是什么，什么时候使用
$nextTick 是 Vue 提供的一个方法，用于在下一次 DOM 更新周期之后执行回调函数。它通常用于在 Vue 完成数据更新后，需要访问更新后的 DOM 状态时，保证操作的是更新后的 DOM。 工作原理： Vue 是异步更新 DOM 的，当数据…...
Redis实现全局ID生成器
全局ID生成器 为什么要用全局ID生成器 1.当我们使用数据库自增来实现id的生成时,规律过于明显,会给用户暴露很多信息 2.当我们订单量过大时无法用数据库的一张表来存放订单,如果两张表的id都是自增的话,id就会出现重复 什么是全局ID生成器 全局ID生成器,是一种在分布式系统…...
Xshell远程连接工具详解
Xshell是一款在Windows平台上运行的远程连接工具，它支持SSH1、SSH2以及Microsoft Windows平台的TELNET协议。Xshell通过互联网实现对远程主机的安全连接，帮助用户在复杂的网络环境中享受他们的工作。本文将详细介绍Xshell的溯源、最新版本以及它的优势。…...
微信网站建设公司/网站seo如何做好优化
版权声明：以上文章中所选用的图片及文字来源于网络以及用户投稿，由于未联系到知识产权人或未发现有关知识产权的登记，如有知识产权人并不愿意我们使用，如果有侵权请立即联系：55525090qq.com，我们立即下架或…...
做艺术品的网站/什么是百度竞价排名
2019独角兽企业重金招聘Python工程师标准>>> 基于《多台filebeatELK实践记录》做多台logstash的模拟 用了4台服务器33、34、48、49，结构如下：（不对的还望指正） 同理在48装logstash和filebeat，在49装filebea…...
wordpress整站模板/免费b站推广网站有哪些
大家好,我是森森.很多人留言给我说,别老讲这么简单的,没用的,讲点实用的,其实我水平本来就不高,这次给大家分享一下,最近做的新手指引界面吧.其实我什么都不会,那天我们出去玩,碰到朋友带孩子在玩,我说,来,给叔叔表演个节目,他腼腆的说,我什么都不会.朋友说,勇敢点,自信点.孩子…...
常州网站制作公司排名/可以免费推广的平台
今天临时加了个需求，我想着用 Spring 来装载，配合 localcache 这样就能做到无感在 web 启动的时候预先将需要的数据加载到内存中。以便于以后直接拿来使用，不用再次进行加载。 目录 ApplicationContextAware 初始化 实现ApplicationContext…...
石家庄高端网站开发/百度提交入口网站网址
为什么80%的码农都做不了架构师？>>> Seagull是由小米工程师陈迪豪发布的开源docker容器和镜像的web界面监控工具，目前在https://github.com/tobegit3hub/seagull维护 下载镜像 docker pull tobegit3hub/seagull启动镜像 docker run -d -p 10…...
福建建设厅网站 资质/2345网址导航官方网站
1. 右击asm文件->属性 转载于:https://www.cnblogs.com/fishert/archive/2009/04/02/1427764.html...