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