uniapp 地图map画出地市轮廓

devtools/2024/9/24 12:53:56/

 

最近做uniapp项目 H5+微信小程序,需要在地图中打点并把相对应的区域轮廓给画出来。

首先查看uniapp官方文档:https://uniapp.dcloud.net.cn/component/map.html

想在uniapp中使用map直接写map标签即可

<view class="page-section page-section-gap"><map style="width: 100%; height: calc( 100vh - 0px);" :latitude="latitude" :longitude="longitude" :markers="markers" :scale="10" @callouttap="callouttap" :polygons="polygon"></map>
</view>

打点的话用markers,划线用polyline,画区域用polygon,我们要画轮廓,所以用polygon

最坑的就是polygon,文档里写的虽然是polygon,但你map中必须写polygons才行!!!

 polygon的用法是把你要画的区域的坐标点提供出来,放到points里

polygon:[{points:[],strokeColor:"#CB4343",strokeWidth:2,fillColor:"#CB43434D"},],

points的格式是这样的,latitude和longtitude和别人相反

想要获取一个地市的轮廓坐标点,需要到这个网站:数据可视化平台

选择地市,把json数据复制出来,自己处理一下,把有用的数据取出来

放到一个js文件里,

 然后在你想要引用的页面引用即可:

<view class="page-section page-section-gap"><map style="width: 100%; height: calc( 100vh - 0px);" :latitude="latitude" :longitude="longitude" :markers="markers" :scale="10" @callouttap="callouttap" :polygons="polygon"></map>
</view>
import mapdata from './mapData.js' //引入地图坐标文件
import {mapState,mapGetters,mapMutations 
} from 'vuex';
export default {
data() {let that = this;return {//平定县坐标latitude:"37.850724",longitude:"113.711337",polygon:[{points:[],strokeColor:"#CB4343",strokeWidth:2,fillColor:"#CB43434D" //最后两位为透明度,下面有对照表},],markers:[{id:"22", //注意这id必须是数字类型的,不然出不来latitude:"37.009866",longitude:"113.71904",title:"11",width:12,height:20,iconPath:"../../static/img/location_icon_gray.jpg",callout:{//自定义标记点上方的气泡窗口 点击有效content:'3333',//文本color:'#ffffff',//文字颜色fontSize:10,//文本大小borderRadius:2,//边框圆角bgColor:'#fa3534',//背景颜色display:'ALWAYS',//常显padding:8},}]};
},
onLoad(option){let self=this;this.loadData()},
methods: {loadData(){let self=this;var mapdata1=mapdata.data//把json数据转成uniapp需要的格式mapdata1.forEach(item=>{let point={latitude:item[1], longitude:item[0]}//console.log(point)self.polygon[0].points.push(point)})}
},
}

还有一点,如果想要区域半透明,要用这种方式

tip:地图中的颜色值color/borderColor/bgColor等需使用6位(8位)十六进制表示,8位时后两位表示alpha值,如:#000000AA
在这里插入图片描述
问题来了,如何用字母(或者数字)表示后面我们想要的不透明度值,对照表为:

rgba(0,0,0,0.2)#00000033十六进制颜色透明度alpha值对照表
100% — FF
99% — FC
98% — FA
97% — F7
96% — F5
95% — F2
94% — F0
93% — ED
92% — EB
91% — E8
90% — E6
89% — E3
88% — E0
87% — DE
86% — DB
85% — D9
84% — D6
83% — D4
82% — D1
81% — CF
80% — CC
79% — C9
78% — C7
77% — C4
76% — C2
75% — BF
74% — BD
73% — BA
72% — B8
71% — B5
70% — B3
69% — B0
68% — AD
67% — AB
66% — A8
65% — A6
64% — A3
63% — A1
62% — 9E
61% — 9C
60% — 99
59% — 96
58% — 94
57% — 91
56% — 8F
55% — 8C
54% — 8A
53% — 87
52% — 85
51% — 82
50% — 80
49% — 7D
48% — 7A
47% — 78
46% — 75
45% — 73
44% — 70
43% — 6E
42% — 6B
41% — 69
40% — 66
39% — 63
38% — 61
37% — 5E
36% — 5C
35% — 59
34% — 57
33% — 54
32% — 52
31% — 4F
30% — 4D
29% — 4A
28% — 47
27% — 45
26% — 42
25% — 40
24% — 3D
23% — 3B
22% — 38
21% — 36
20% — 33
19% — 30
18% — 2E
17% — 2B
16% — 29
15% — 26
14% — 24
13% — 21
12% — 1F
11% — 1C
10% — 1A
9% — 17
8% — 14
7% — 12
6% — 0F
5% — 0D
4% — 0A
3% — 08
2% — 05
1% — 03
0% — 00

我想区域为30%透明度,所以这样写:fillColor:"#CB43434D"


http://www.ppmy.cn/devtools/98743.html

相关文章

Redhat8 搭建Zabbix6(一)安装

文章目录 写在前面版本的选择简述 程序安装预先支持文件PHP安装MySQL安装Zabbix 安装数据库部分配置Zabbix 服务配置前端配置 写在前面 版本的选择 6.0版本与5.0版本缺少了聚合图形的构件 6.0版本在拓扑图流量显示与5.0版本也存在于变化 之前安装6.4版本流量显示发觉有一些问…

设计模式六大原则(六)--迪米特法则

1. 简介 1.1. 概述 迪米特法则(Law of Demeter),也被称为最少知识原则(Principle of Least Knowledge),是面向对象设计中非常重要的一条原则。它主要强调的是一个对象应该对其他对象有最少的了解,即一个对象应该只与其他对象的接口发生关系,而不应该依赖于这些对象的…

软件工程造价师习题练习 19

1.在 A 系统中&#xff0c;用户可以对白名单进行新增、删除与查询的操作。在查询的过程中&#xff0c;用户在搜索框内录入关键字&#xff0c;这个“录入”可以识别为非基本过程。 正确 错误 在A系统中&#xff0c;用户对白名单进行新增、删除与查询的操作构成了系统的主要功能…

黑神话:悟空游戏用的什么服务器?

黑神话&#xff1a;悟空游戏用的什么服务器&#xff1f;《黑神话&#xff1a;悟空》游戏使用的是基于云计算的强大服务器&#xff0c;具体型号和配置未公开。这些服务器在游戏发布初期就表现出极强的处理能力和稳定性&#xff0c;尽管同时在线人数一度突破百万&#xff0c;但整…

UDP+TCP

一、UDP协议 1.recvfrom:recvform(int sockfd,void *buf,size_t len,int flags,struct sockaddr *src_addr,socklen_t *addrlen); 参数&#xff1a;socket的fd; 保存数据的空间地址 &#xff1b; 空间大小&#xff1b; 默认接收方式&#xff08;默认阻塞&#xf…

数据库和缓存不一致的问题及解决方案

引言 在现代软件架构中&#xff0c;为了提高系统性能和响应速度&#xff0c;通常会采用缓存技术来减少对后端数据库的访问频率。Redis 作为一种高性能的键值存储系统&#xff0c;常常被用作缓存层。然而&#xff0c;这种设计带来了一个挑战——数据一致性问题。本文将深入探讨…

Vue项目创建和使用

快速上手 | Vue.js (vuejs.org) nodejs.org/ vue项目实质上是index.html页面和多个js文件的集合&#xff0c;最终解析后的html和js代码可以由浏览器解析运行&#xff1a; vue项目的创建&#xff0c;需要脚手架工具来搭建&#xff1b; 在编译的源码阶段&#xff0c;文件格式为.…

重磅!2024国自然,放榜!仅11.43%中标率(附近4年对比)

2024国自然放榜 8月23日&#xff0c;国自然基金委正式发布《关于2024年国家自然科学基金集中接收申请项目评审结果的通告》&#xff01; 今天开始国自然系统将开始陆续放榜&#xff0c;心急的小伙伴也可以直接询问单位的科研处&#xff08;科研处已经有放榜的第一手消息&…