map

基础库 1.0.0 开始支持，低版本需做兼容处理。

地图（v2.7.0 起支持同层渲染）。相关api wx.createMapContext。

个性化地图能力可在小程序后台“开发-开发者工具-腾讯位置服务”申请开通，详见《微信小程序解决方案》。 小程序内地图组件应使用同一 subkey，可通过 layer-style（地图官网设置的样式 style 编号）属性选择不同的底图风格。 组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

示例小程序

regionchange 返回值

视野改变时，regionchange 会触发两次，返回的 type 值分别为 begin 和 end。

2.8.0 起 begin 阶段返回 causedBy，有效值为 gesture（手势触发） & update（接口触发）

2.3.0 起 end 阶段返回 causedBy，有效值为 drag（拖动导致）、scale（缩放导致）、update（调用更新接口导致）。

e = {causedBy, type, detail: {rotate, skew, scale, centerLocation, region}}

setting

提供 setting 对象统一设置地图配置。同时对于一些动画属性如 rotate 和 skew，通过 setData 分开设置时无法同时生效，需通过 settting 统一修改。

// 默认值
const setting = {
  skew: 0,
  rotate: 0,
  showLocation: false,
  showScale: false,
  subKey: '',
  layerStyle: 1,
  enableZoom: true,
  enableScroll: true,
  enableRotate: false,
  showCompass: false,
  enable3D: false,
  enableOverlooking: false,
  enableSatellite: false,
  enableTraffic: false,
}
this.setData({
  // 仅设置的属性会生效，其它的不受影响
  setting: {
    enable3D: true,
    enableTraffic: true
  }
})

marker

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

marker 上的气泡 callout

marker 上的自定义气泡 customCallout

customCallout 存在时将忽略 callout 与 title 属性。自定义气泡采用采用 cover-view 定制，灵活度更高。

使用方式如下，map 组件下添加名为 callout 的 slot 节点，其内部的 cover-view 通过 marker-id 属性与 marker 绑定。当 marker 创建时，该 cover-view 显示的内容将作为 callout 显示在标记点上方。

<map>
  <cover-view slot="callout">
    <cover-view marker-id="1"></cover-view>
    <cover-view marker-id="2"></cover-view>
  </cover-view>
</map>

示例DEMO： https://developers.weixin.qq.com/s/cZWIojm47pjN

marker 上的气泡 label

polyline

指定一系列坐标点，从数组第一项连线至最后一项。绘制彩虹线时，需指定不同分段的颜色，如 points 包含 5 个点，则 colorList 应传入 4 个颜色值；若 colorList 长度小于 points.length - 1，则剩下的分段颜色与最后一项保持一致。

level 字段表示与其它地图元素的压盖关系，可选值如下：

polygon

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

circle

在地图上显示圆

control

在地图上显示控件，控件不随着地图移动。即将废弃，请使用 cover-view

position

bindregionchange 返回值

Bug & Tip

1. tip：个性化地图暂不支持工具中调试。请先使用微信客户端进行测试。
2. tip：地图中的颜色值color/borderColor/bgColor等需使用6位（8位）十六进制表示，8位时后两位表示alpha值，如：#000000AA
3. tip：地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。
4. tip: map 组件使用的经纬度是火星坐标系，调用 wx.getLocation 接口需要指定 type 为 gcj02
5. tip：从 2.8.0 起 map 支持同层渲染，更多请参考原生组件使用限制
6. tip：请注意原生组件使用限制。

比例尺

示例代码

在开发者工具中预览效果

点聚合

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

使用流程如下：

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

示例代码

在开发者工具中预览效果

需注意的是：1. 地图上的 marker 分为普通的 marker 与参与聚合的 marker，参与聚合时需指定属性 joinCluster 为 true； 2. 自定义聚合簇样式时，同样通过 MapContext.addMarkers 进行绘制，此时需携带 clusterId。