微信小程序开发文档微信小程序API 地图·MapContext对象

2024-02-25 开发教程微信小程序开发文档匿名 4℃

`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.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)

添加个性化图层。

示例代码

<!-- 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,
      }]
    })
  }
})

上一节：微信小程序API 地图·创建MapContext对象

下一节：微信小程序API 图片·保存图片

"微信小程序开发文档"的目录

微信小程序开发文档 微信小程序API 地图·MapContext对象

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

方法