map

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

微信 Windows 版：支持

微信 Mac 版：支持

渲染框架支持情况：Skyline （使用最新 Nighly 工具调试）、WebView

# 功能描述

地图 v2.7.0 起支持同层渲染。

map组件提供了地图展示、交互、叠加点线面及文字等功能，同时支持个性化地图样式，可结合地图服务 API 实现更丰富功能。

# 地图个性化样式组件

地图个性化样式组件是腾讯位置服务为开发者提供的地图高级能力，开发者可以在法律允许的范围内，定制背景面、背景线、道路、POI等多种地图元素，灵活地设计心仪的地图样式。

购买该能力后，您可以在MP平台「管理->付费管理->概览->地图个性化样式->去使用」中创建配置您的地图个性化样式，您可以选择我们提供的基础及高级模版，也可以通过在线编辑平台，对多种地图元素的样式进行自定义设置，以满足在不同场景下的个性化需求。

注意：

# 地图服务API

地图服务API 与map组件基于同一套数据体系，无缝贴合，叠加使用可实现更丰富的功能。 提供：地点搜索、关键词输入提示、正/逆地址解析（经纬度与地址互转）驾车与步行路线规划等功能。

若开发者使用通过LBS开放平台自行申请的服务账号，在小程序连接并调用位置服务产品用于商业行为（政府公共事务及公益组织事务除外），腾讯位置服务有权收取商业授权费，详细内容可以查看或咨询腾讯微位置服务官网

# 深入控制地图

通过微信小程序API中wx.createMapContext方法，创建 map 上下文 MapContext 对象，通过其实现更细粒度的地图交互和功能，包括：控制地图视野、获取地图位置与视角等信息、marker移动（轨迹回放）、动态创建个性化图层、拉起地图APP选择导航等

# 小程序插件

现成插件简单接入，提供：路线规划、地图选点、城市选择器、地铁图 常用功能。

# 开源示例中心

包含Map组件、服务API、插件等功能使用方法，全面了解小程序下的所有地图能力。示例内容源码开放，降低各位开发者接入成本。

# 地图基础属性

# 属性说明

e.detail = {markerId}e.detail = {markerId}e.detail = {controlId}e.detail = {markerId}e.detail = {name, longitude, latitude}e.detail = {ability, errCode, errMsg}e.detail = {ability, errCode, errMsg}e.detail = {errCode, errMsg}e.detail = {longitude, latitude}

# 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

rotateskewsetDatasettting

// 默认值
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

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

注：可结合地图服务API - 地点搜索 实现地图搜索功能。

注：建议为每个 marker 设置上 number 类型 id，保证更新 marker 时有更好的性能。

# marker 上的气泡 callout

# marker 上的自定义气泡 customCallout

customCalloutcallouttitlecover-view

mapcalloutslotcover-viewmarkermarkercover-viewcallout

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

# marker 上的气泡 label

# 点聚合

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

使用流程如下：

# 示例代码

需注意的是：

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

# polyline

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

注：可结合 地图服务API - 驾车路线规划，实现路线计算与展示。

Array

textStylesegmentTexts

# SegmentText

# TextStyle

level

# polygon

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

Array

# circle

在地图上显示圆

# control

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

# position

# bindregionchange 返回值

# 比例尺

# bindabilitysuccess、bindabilityfailed 和 binderror 的返回值

layer-style

共同参数如下 errCode 的定义如下：

# 示例代码

# Bug & Tip

tiptiptiptipmaptypegcj02tiptipenablePassiveEvent