uniapp map组件多边形、标记点的坑（一）

最近项目用到uniapp开发微信小程序，需要在地图上展示多边形，标记点

一、地图加载

<view class="page-section page-section-gap">
			<map id="mapInfo" ref="mapInfo" class="mapinfo" 
			 :latitude="coordinate.lat" :longitude="coordinate.lng"
			 :markers="covers" :show-location="true" 
			 :polygons="polygons" :scale="scale"
			 @markertap="markertap" @callouttap="markertap" @regionchange="regionchange">
			</map>
</view>

id和ref最好都写，在使用 uni.createMapContext() 方法时会用到id，
类似显示指南针show-compass的属性，在真机调试中可以看到，编辑器中不显示

属性

 :latitude="coordinate.lat" :longitude="coordinate.lng"

地图初始化位置，不设置的话，默认在北京，可以配合uni.getLocation()使用，map 组件使用的经纬度是国测局坐标，调用 uni.getLocation 接口需要指定 type 为 gcj02

:scale="scale"

地图显示层级

:markers="covers"

标记点的属性，需要配置数组类型

:polygons="polygons"

多边形，需要配置数组类型

:show-location="true"

显示当前位置的小图标

方法

 @markertap="markertap" @callouttap="markertap" @regionchange="regionchange"

markertap标记物点击事件，callouttap气泡点击事件，regionchange视野发生变化时的事件

二、多边形

配置多边形对应的对象数组就行，形式[{},{}]，注意数据加载最好放到mounted或者onReady中
示例：

polygons: [{
			//多边形的坐标数组
			points: [{
						"longitude": 100.789761,
						"latitude": 22.022137
					}, {
						"longitude": 100.789833,
						"latitude": 22.022136
					}, {
						"longitude": 100.790838,
						"latitude": 22.019582
					}, {
						"longitude": 100.794509,
						"latitude": 22.020163
					}, {
						"longitude": 100.792928,
						"latitude": 22.022182
					}, {
						"longitude": 100.789761,
						"latitude": 22.022137
					}],
			fillColor: "#fff",//填充颜色
			strokeColor: "#DC143C",//描边颜色
			strokeWidth: 2,//描边宽度
			zIndex: 1,//层级
		}]

三、标记点

标记点跟多边形一样，加载数组就行，label的数据格式和callout类似
示例：

 covers: [{
		 	latitude: 22.03556503110792,
			longitude: 100.81316425408939,
			title: '我是标题',//标题
			iconPath: '../../../static/userImage/home/to.png',//标记图片，不配置的话使用默认标记
			callout: {//配置气泡，配置气泡后，title会失效
						content: '气泡内容',
						display: 'ALWAYS',//显示方式，可以配置点击或一直显示，BYCLICK点击显示
						padding: '10',//文本边缘留白，文字和边界宽度
						backgroundColor: "#f1f1f1"//背景颜色
					}
		}]

最后，标记点可以有点击事件，包括气泡，文本都可以设置点击事件，多边形不可以。
uniapp默认的腾讯地图，去看了腾讯地图API，可以通过js加监听方法对多变形增加点击事件，目前uniapp提供的组件暂时还不可以，有需求的同学得自己换别的方式了。