创新互联小程序教程：微信小程序API地图组件控制

wx.createMapContext(mapId)

创建并返回 map 上下文 mapContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内组件

mapContext

mapContext通过 mapId 跟一个组件绑定，通过它可以操作对应的组件。

mapContext 对象的方法列表

方法	参数	说明	最低版本
getCenterLocation	OBJECT	获取当前地图中心的经纬度，返回的是 gcj02 坐标系，可以用于 `wx.openLocation`
moveToLocation	无	将地图中心移动到当前定位点，需要配合map组件的show-location使用
translateMarker	OBJECT	平移marker，带动画	1.2.0
includePoints	OBJECT	缩放视野展示所有经纬度	1.2.0
getRegion	OBJECT	获取当前地图的视野范围	1.4.0
getScale	OBJECT	获取当前地图的缩放级别	1.4.0

getCenterLocation 的 OBJECT 参数列表

参数	类型	必填	说明
success	Function	否	接口调用成功的回调函数，res = { longitude: "经度", latitude: "纬度"}
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

translateMarker 的 OBJECT 参数列表

参数	类型	必填	说明
markerId	Number	是	指定marker
destination	Object	是	指定marker移动到的目标点
autoRotate	Boolean	是	移动过程中是否自动旋转marker
rotate	Number	是	marker的旋转角度
duration	Number	否	动画持续时长，默认值1000ms，平移与旋转分别计算
animationEnd	Function	否	动画结束回调函数
fail	Function	否	接口调用失败的回调函数

includePoints 的 OBJECT 参数列表

参数	类型	必填	说明
points	Array	是	要显示在可视区域内的坐标点列表，[{latitude, longitude}]
padding	Array	否	坐标点形成的矩形边缘到地图边缘的距离，单位像素。格式为[上,右,下,左]，安卓上只能识别数组第一项，上下左右的padding一致。开发者工具暂不支持padding参数。

getRegion 的 OBJECT 参数列表

参数	类型	必填	说明
success	Function	否	接口调用成功的回调函数，res = {southwest, northeast}，西南角与东北角的经纬度
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

getScale 的 OBJECT 参数列表

参数	类型	必填	说明
success	Function	否	接口调用成功的回调函数，res = {scale}
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码：

// 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地图组件控制
链接URL：http://www.shufengxianlan.com/qtweb/news20/473470.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容