uniapp 地图map画出地市轮廓

最近做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"