微信小程序如何創(chuàng)建并返回map上下文mapContext對(duì)象

這篇文章主要介紹了微信小程序如何創(chuàng)建并返回map上下文mapContext對(duì)象的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇微信小程序如何創(chuàng)建并返回map上下文mapContext對(duì)象文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

wx.createMapContext(mapId)

創(chuàng)建并返回 map 上下文 mapContext 對(duì)象。在自定義組件下，第二個(gè)參數(shù)傳入組件實(shí)例this，以操作組件內(nèi) <map/> 組件

mapContext

mapContext通過(guò) mapId 跟一個(gè)<map/>組件綁定，通過(guò)它可以操作對(duì)應(yīng)的<map/>組件。

mapContext 對(duì)象的方法列表

getCenterLocation 的 OBJECT 參數(shù)列表

translateMarker 的 OBJECT 參數(shù)列表

includePoints 的 OBJECT 參數(shù)列表

getRegion 的 OBJECT 參數(shù)列表

getScale 的 OBJECT 參數(shù)列表

示例代碼：

<!-- map.wxml -->
<map id="myMap" show-location />

<button type="primary" bindtap="getCenterLocation">獲取位置</button>
<button type="primary" bindtap="moveToLocation">移動(dòng)位置</button>
<button type="primary" bindtap="translateMarker">移動(dòng)標(biāo)注</button>
<button type="primary" bindtap="includePoints">縮放視野展示所有經(jīng)緯度</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,
      }]
    })
  }
})

關(guān)于“微信小程序如何創(chuàng)建并返回map上下文mapContext對(duì)象”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“微信小程序如何創(chuàng)建并返回map上下文mapContext對(duì)象”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。