MapContext

MapContext 实例，可通过 wx.createMapContext 获取。

MapContext 通过 id 跟一个 map 组件绑定，操作对应的 map 组件。

方法

MapContext.getCenterLocation()

获取当前地图中心的经纬度。返回的是 gcj02 坐标系，可以用于 wx.openLocation()

MapContext.moveToLocation(Object object)

将地图中心移置当前定位点，此时需设置地图组件 show-location 为true。2.8.0 起支持将地图中心移动到指定位置。

MapContext.translateMarker(Object object)

平移marker，带动画。

MapContext.moveAlong(Object object)

沿指定路径移动 marker，用于轨迹回放等场景。动画完成时触发回调事件，若动画进行中，对同一 marker 再次调用 moveAlong 方法，前一次的动画将被打断。

MapContext.includePoints(Object object)

缩放视野展示所有经纬度

MapContext.getRegion()

获取当前地图的视野范围

MapContext.getRotate()

获取当前地图的旋转角

MapContext.getSkew()

获取当前地图的倾斜角

MapContext.getScale()

获取当前地图的缩放级别

MapContext.setCenterOffset(Object object)

设置地图中心点偏移，向后向下为增长，屏幕比例范围(0.25~0.75)，默认偏移为[0.5, 0.5]

MapContext.removeCustomLayer(Object object)

移除个性化图层。

MapContext.addCustomLayer(Object object)

添加个性化图层。

MapContext.addGroundOverlay(Object object)

创建自定义图片图层，图片会随着地图缩放而缩放。

MapContext.updateGroundOverlay(Object object)

更新自定义图片图层。

MapContext.removeGroundOverlay(Object object)

移除自定义图片图层。

MapContext.toScreenLocation(Object object)

获取经纬度对应的屏幕坐标，坐标原点为地图左上角。

MapContext.fromScreenLocation(Object object)

获取屏幕上的点对应的经纬度，坐标原点为地图左上角。

MapContext.openMapApp(Object object)

拉起地图APP选择导航。

MapContext.addMarkers(Object object)

添加 marker。

MapContext.removeMarkers(Object object)

移除 marker。

MapContext.initMarkerCluster(Object object)

初始化点聚合的配置，未调用时采用默认配置。

MapContext.on(string event, Object detail)

监听地图事件。

markerClusterCreate

缩放或拖动导致新的聚合簇产生时触发，仅返回新创建的聚合簇信息。

返回参数

markerClusterClick

聚合簇的点击事件。

返回参数

ClusterInfo 结构

示例代码

在开发者工具中预览效果

<!-- map.wxml -->
<map id="myMap" show-location />
<button type="primary" bindtap="getCenterLocation">获取位置</button>
<button type="primary" bindtap="moveToLocation">移动位置</button>
<button type="primary" bindtap="translateMarker">移动标注</button>
<button type="primary" bindtap="includePoints">缩放视野展示所有经纬度</button>

// map.js
Page({
  onReady: function (e) {
    // 使用 wx.createMapContext 获取 map 上下文
    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: 0,
      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,
      }]
    })
  }
})