MapContext

版本:v2.21.0 更新:2021 年 12 月 25 日

wx.createMapContext(mapId, this)

创建 map 上下文 MapContext() 对象。

参数
  • mapId (string()) – <map> 组件的 id

  • this (object()) – 在自定义组件下,当前组件实例的this,以操作组件内 <map> 组件

返回

MapContext()

class MapContext()

MapContext() 实例,可通过 wx.createMapContext() 获取。

MapContext() 通过 id 跟一个 <map> 组件绑定,操作对应的 <map> 组件。

方法

MapContext.getCenterLocation({[success][, fail][, complete]})

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

参数
  • latitude}) (function success({longitude,()) –

    接口调用成功的回调函数

    • longitude (number) - 经度

    • latitude (number) - 纬度

  • fail (function()) – 接口调用失败的回调函数

  • complete (function()) – 接口调用结束的回调函数(调用成功、失败都会执行)

MapContext.moveToLocation()

将地图中心移动到当前定位点。需要配合 map 组件的 show-location 使用

MapContext.translateMarker(object)

平移marker,带动画

参数
  • object (Object()) – object

MapContext.includePoints(object)

缩放视野展示所有经纬度

参数
  • object (Object()) – object

MapContext.getRegion()

获取当前地图的视野范围

MapContext.getScale()

获取当前地图的缩放级别

示例代码

在开发者工具中预览效果

<!-- 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(e) {
    // 使用 wx.createMapContext 获取 map 上下文
    this.mapCtx = wx.createMapContext('myMap')
  },
  getCenterLocation() {
    this.mapCtx.getCenterLocation({
      success(res) {
        console.log(res.longitude)
        console.log(res.latitude)
      }
    })
  },
  moveToLocation() {
    this.mapCtx.moveToLocation()
  },
  translateMarker() {
    this.mapCtx.translateMarker({
      markerId: 0,
      autoRotate: true,
      duration: 1000,
      destination: {
        latitude: 23.10229,
        longitude: 113.3345211,
      },
      animationEnd() {
        console.log('animation end')
      }
    })
  },
  includePoints() {
    this.mapCtx.includePoints({
      padding: [10],
      points: [{
        latitude: 23.10229,
        longitude: 113.3345211,
      }, {
        latitude: 23.00229,
        longitude: 113.3345211,
      }]
    })
  }
})