# map

地图组件。

地图组件用于展示地图，而定位API只是获取坐标，请勿混淆两者。

平台差异说明

地图服务商说明

属性说明

注意

• <map> 组件的宽/高推荐写直接量，比如：750rpx，不要设置百分比值。
• 谷歌地图使用 wgs84 坐标，其他地图使用 gcj02 坐标，用错坐标类型会显示偏移。
• App平台 layer-style 属性需要在地图服务商后台创建，值设置为高德后台申请的字符串， 详情 。
• H5 端高德地图 include-points 属性仅支持 2 个坐标点，表示显示范围的西南角和东北角。

# 近期新增功能

1. 支持点聚合，适用于marker过多场景。
2. 支持彩虹蚯蚓线，常用于路线规划场景。
3. 覆盖物支持调整与其它地图元素的压盖关系。
4. 支持marker（小车）平移动画，适用于轨迹回放场景。

markers

标记点用于在地图上显示标记的位置

marker 上的气泡 callout

marker 上的标签 label

# 点聚合

当地图上需要展示的标记点 marker 过多时，可能会导致界面上 marker 出现压盖，展示不全，并导致整体性能变差。针对此类问题，推出点聚合能力。

使用流程如下：

MapContext.initMarkerCluster 对聚合点进行初始化配置（可选）； MapContext.addMarkers 指定参与聚合的 marker； MapContext.on('markerClusterCreate', callback) 触发时，通过 MapContext.addMarkers 更新聚合簇的样式 （可选）； MapContext.removeMarkers 移除参与聚合的 marker；

polyline

指定一系列坐标点，从数组第一项连线至最后一项

注意事项

• App-nvue 当 arrowLine 为 true 时，显示的是带箭头的图片拼接的线 color 值会被忽略，替换箭头图片的方法 参考文档

polygon
指定一系列坐标点，根据 points 坐标数据生成闭合多边形

circles

在地图上显示圆

controls

在地图上显示控件，控件不随着地图移动

position

地图组件的经纬度必填，如果不填经纬度则默认值是北京的经纬度。

示例 查看示例

<template>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
			</view>
		</view>
	</view>
</template>