小程序开发API之地图wx.createMapContext及MapContext 实例

版权声明：欢迎转载，可Chat交流，写博不易请标明出处： https://blog.csdn.net/JackJia2015/article/details/86700861

效果展示

wx.createMapContext(string mapId, Object this)

创建 map 上下文 MapContext 对象。
参数 string mapId

MapContext

MapContext 实例，可通过 wx.createMapContext 获取。
mapContext 通过 id 跟一个

方法

MapContext.getCenterLocation()

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

object.success 回调函数参数Object res

MapContext.moveToLocation()

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

MapContext.translateMarker(Object object)

平移marker，带动画
translateMarker参数

object.destination 的结构

MapContext.includePoints(Object object)

缩放视野展示所有经纬度
includePoints参数

object.points 的结构

MapContext.getRegion()

获取当前地图的视野范围
getRegion参数

object.success 回调函数参数Object res

MapContext.getScale()

获取当前地图的缩放级别
getScale参数

object.success 回调函数参数Object res

示例：
效果展示

代码
index.wxml

<map 
  id="myMap" 
  style="width: 710rpx; height: 250px;" 
  latitude="{{latitude}}" 
  longitude="{{longitude}}" 
  markers="{{markers}}" 
  show-location>
</map>
<button bindtap="getCenterLocation" type="primary">获取当前地图中心的经纬度</button>
<button bindtap="moveToLocation"  type="primary">将地图中心移动到当前定位点</button>
<button bindtap="translateMarker" type="primary">平移marker，带动画</button>
<button bindtap="includePoints" type="primary">缩放视野展示所有经纬度</button>
<button bindtap="scaleClick" type="primary">获取当前地图的缩放级别</button>
<button bindtap="getRegionClick" type="primary">获取当前地图的视野范围</button>

index.wxss

map{
  margin: 20rpx;
}
button{
  margin: 20rpx;
}

index.js

Page({
  data: {
    latitude: 23.099994,
    longitude: 113.324520,
    markers: [{
      id: 1,
      latitude: 23.099994,
      longitude: 113.324520,
      name: '腾讯'
    }],
  },
  onReady: function (e) {
    //创建 map 上下文 MapContext 对象。
    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()
  },
  //平移marker，带动画
  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,
      }]
    })
  },
  //获取当前地图的缩放级别
  scaleClick: function(){
    this.mapCtx.getScale({
      success: function (res) {
        console.log(res.scale)
      }
    })
  },
  //获取当前地图的视野范围
  getRegionClick: function () {
    this.mapCtx.getRegion({
      success: function (res) {
        console.log(res.southwest)
        console.log(res.northeast)
      }
    })
  }
})