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