# map

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

微信 Windows 版 ：支持

微信 Mac 版 ：支持

相关 api: wx.createMapContext

# 功能描述

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

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

# 地图个性化样式组件

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

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

注意：

1. 自2023年6月29日0点起，该能力需要先购买再使用。若未购买，届时将无法使用该能力。具体购买方式见 付费管理 。
2. 自2023年6月29日0时起，个性化地图配置界面的入口统一为 微信公众平台-付费管理 ，请从此入口进入，腾讯位置服务官网入口不再使用。已经在小程序生效的个性化样式配置，将于2023年6月29日0时变更为默认样式，如有个性化样式配置需求，请于6月29日0时前，前往 微信公众平台-付费管理 进行相关能力的开通和配置。

# 地图服务API

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

详情见： 地图服务API在小程序中的使用方法

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

# 深入控制地图

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

# 小程序插件

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

详情见： 小程序地图插件使用指南

# 开源示例中心

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

# 地图基础属性

# 属性说明

# 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

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

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

注： 建议为每个 marker 设置上 number 类型 id，保证更新 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>