微信小程序官方组件展示之地图map源码

以下将展示微信小程序之地图map源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。​

功能描述：​

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

小程序解决方案​

除本章节介绍的小程序地图基础属性外，腾讯位置服务推出《微信小程序解决方案》，从检索API、基础地图组件、个性化、插件、行业方案等多个层面，为不同场景需求的小程序开发者提供完整的地图能力。​

个性化地图​

个性化地图样式是腾讯位置服务开放的一项高级能力，开发者可以根据自身产品的使用场景，UI风格， 选取或者创建风格匹配的地图样式。小程序内地图组件应使用同一 subkey，可通过 layer-style（位置服务官网设置的样式 style 编号）属性配置，并支持动态切换样式。 组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。详情见：个性化地图使用指南​

小程序插件​

腾讯位置服务基于微信提供的小程序插件能力，专注于（围绕）地图功能，打造一系列小程序插件，可以帮助开发者简单、快速的构建小程序，是您实现地图功能的最佳伙伴。目前插件提供路线规划、地铁图、地图选点服务，详情见：小程序地图插件使用指南。​

地图检索​

腾讯位置服务在微信开放社区的服务平台上线了一系列地图检索服务，包含4个 POI 数据类（逆地址解析、地址解析、地点搜索、关键词输入提示）、2个路线规划类（驾车路线规划、步行路线规划）、1个坐标工具类（坐标转换），覆盖了绝大部分地图应用场景。或者登陆位置服务官网的Webservice使用指南了解详细介绍。 微信小程序开发者可以使用海外地图进行展示，若需要海外检索能力，可在海外位置服务进行申请。​

小程序示例中心​

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

近期新增功能​

支持点聚合，适用于 marker 过多场景。​

支持彩虹蚯蚓线，常用于路线规划场景。​

覆盖物支持调整与其它地图元素的压盖关系。​

支持marker（小车）平移动画，适用于轨迹回放场景。​

地图基础属性​

属性说明：​

regionchange 返回值​

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

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

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

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 设置上 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>​

</cover-view>​

</map>​

marker 上的气泡 label​

点聚合​

当地图上需要展示的标记点 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。​

polyline​

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

注：textStyle 与 segmentTexts 结合可在折线线段上面绘制文字，用来显示路名。​

SegmentText​

TextStyle​

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

polygon​

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

circle​

在地图上显示圆​

control​

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

position​

bindregionchange 返回值​

比例尺​

示例代码​

JAVASCRIPT​

Page({
  data: {
    latitude: 23.099994,
    longitude: 113.324520,
    markers: [{
      id: 1,
      latitude: 23.099994,
      longitude: 113.324520,
      name: 'T.I.T 创意园'
    }],
    covers: [{
      latitude: 23.099994,
      longitude: 113.344520,
      iconPath: '/image/location.png'
    }, {
      latitude: 23.099994,
      longitude: 113.304520,
      iconPath: '/image/location.png'
    }]
  },
  onReady: function (e) {
    this.mapCtx = wx.createMapContext('myMap')
  },
  getCenterLocation: function () {
    this.mapCtx.getCenterLocation({
      success: function(res){
        console.log(res.longitude)
        console.log(res.latitude)
      }
    })
  },
  moveToLocation: function () {
    this.mapCtx.moveToLocation()
  },
  translateMarker: function() {
    this.mapCtx.translateMarker({
      markerId: 1,
      autoRotate: true,
      duration: 1000,
      destination: {
        latitude:23.10229,
        longitude:113.3345211,
      },
      animationEnd() {
        console.log('animation end')
      }
    })
  },
  includePoints: function() {
    this.mapCtx.includePoints({
      padding: [10],
      points: [{
        latitude:23.10229,
        longitude:113.3345211,
      }, {
        latitude:23.00229,
        longitude:113.3345211,
      }]
    })
  }
})
      

WXML​

Page({
  data: {
    latitude: 23.099994,
    longitude: 113.324520,
    markers: [{
      id: 1,
      latitude: 23.099994,
      longitude: 113.324520,
      name: 'T.I.T 创意园'
    }],
    covers: [{
      latitude: 23.099994,
      longitude: 113.344520,
      iconPath: '/image/location.png'
    }, {
      latitude: 23.099994,
      longitude: 113.304520,
      iconPath: '/image/location.png'
    }]
  },
  onReady: function (e) {
    this.mapCtx = wx.createMapContext('myMap')
  },
  getCenterLocation: function () {
    this.mapCtx.getCenterLocation({
      success: function(res){
        console.log(res.longitude)
        console.log(res.latitude)
      }
    })
  },
  moveToLocation: function () {
    this.mapCtx.moveToLocation()
  },
  translateMarker: function() {
    this.mapCtx.translateMarker({
      markerId: 1,
      autoRotate: true,
      duration: 1000,
      destination: {
        latitude:23.10229,
        longitude:113.3345211,
      },
      animationEnd() {
        console.log('animation end')
      }
    })
  },
  includePoints: function() {
    this.mapCtx.includePoints({
      padding: [10],
      points: [{
        latitude:23.10229,
        longitude:113.3345211,
      }, {
        latitude:23.00229,
        longitude:113.3345211,
      }]
    })
  }
})
      

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：请注意原生组件使用限制。​

7.tip: 若当前组件所在的页面或全局开启了 enablePassiveEvent 配置项，该内置组件可能会出现非预期表现（详情参考 enablePassiveEvent 文档）​