微信小程序如何创建并返回map上下文mapContext对象

这篇文章主要介绍了微信小程序如何创建并返回map上下文mapContext对象的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇微信小程序如何创建并返回map上下文mapContext对象文章都会有所收获，下面我们一起来看看吧。

wx.createMapContext(mapId)

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

mapContext

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

mapContext 对象的方法列表

getCenterLocation 的 OBJECT 参数列表

translateMarker 的 OBJECT 参数列表

includePoints 的 OBJECT 参数列表

getRegion 的 OBJECT 参数列表

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

关于“微信小程序如何创建并返回map上下文mapContext对象”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“微信小程序如何创建并返回map上下文mapContext对象”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。