实现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办公软…...
使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明：假设每台服务器已…...
反向工程与模型迁移：打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...
React Native 开发环境搭建（全平台详解）
React Native 开发环境搭建（全平台详解） 在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS…...
python/java环境配置
环境变量放一起 python： 1.首先下载Python Python下载地址：Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个，然后自定义，全选 可以把前4个选上 3.环境配置 1）搜高级系统设置 2…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面，避免重复抓取，以节省资源和时间。 在分布式环境下，增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路：将增量判…...
算法笔记2
1.字符串拼接最好用StringBuilder，不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...
Qemu arm操作系统开发环境
使用qemu虚拟arm硬件比较合适。 步骤如下： 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载，下载地址：https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...
 error)
【前端异常】JavaScript错误处理：分析 Uncaught (in promise) error
在前端开发中，JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作（如 Promise、async/await 等），开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝（r…...
基于江科大stm32屏幕驱动，实现OLED多级菜单（动画效果），结构体链表实现(独创源码)
引言 在嵌入式系统中，用户界面的设计往往直接影响到用户体验。本文将以STM32微控制器和OLED显示屏为例，介绍如何实现一个多级菜单系统。该系统支持用户通过按键导航菜单，执行相应操作，并提供平滑的滚动动画效果。 本文设计了一个…...
密码学基础——SM4算法
博客主页：christine-rr-CSDN博客 专栏主页：密码学 📌 【今日更新】📌 对称密码算法——SM4 目录 一、国密SM系列算法概述 二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换 编辑…...