微信小程式開發（十一）小程式地圖元件map

地圖元件顧名思義就是顯示我們的地圖的，通過經緯度，將位置在地圖上顯示出來；這裡提幾個常用屬性，更多的可以到官網進行查閱。

屬性

longitude：number型別，經度座標

latitude：number型別，緯度座標

markers：Array.<marker值>陣列型別，標記點，可以有多個

show-location：boolean型別，顯示帶有方向的當前定位點

因為座標點不好弄，所以我們通過官網demo進行演示。

官網demo地址：開啟小程式map元件官網地址，找到
點選在開發者工具中預覽效果，會自動載入到小程式開發工具中。

程式碼分析

匯入官網demo之後，我們可以看到index.wxml、index.js、index.wxss三個檔案。

這個樣子的一個工程目錄，但是這裡還是貼一下程式碼，並新增了相關注釋。

index.js檔案程式碼

Page({
  data: {
    /**
     * 預設中心值
     */
    latitude: 23.099994,
    longitude: 113.324520,
    /**
     * markers標記點陣列
     */
    markers: [{
      id: 1,
      latitude: 23.099994,
      longitude: 113.324520,
      name: 'T.I.T 創意園',
      iconPath: '/image/location.png'
    }],
    /**
     * covers標記點陣列  即將被刪除，所以不做過多介紹
     */
    covers: [{
      latitude: 23.099994,
      longitude: 113.344520,
      iconPath: '/image/location.png'
    }, {
      latitude: 23.099994,
      longitude: 113.304520,
      iconPath: '/image/location.png'
    }]
  },
  onReady: function (e) {
    /**
     * 獲取上下文物件
     */
    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: 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,
      }]
    })
  }
})

index.wxml檔案程式碼

<view class="page-body">
  <view class="page-section page-section-gap">
    <map
      id="myMap"
      style="width: 100%; height: 300px;"
      latitude="{{latitude}}"
      longitude="{{longitude}}"
      markers="{{markers}}"
      covers="{{covers}}"
      show-location
    ></map>
  </view>
  <view class="btn-area">
   <!-- 獲取中心點位置事件監聽 -->
    <button bindtap="getCenterLocation" class="page-body-button" type="primary">獲取位置</button>
    <!-- 移動到指定位置事件監聽 -->
    <button bindtap="moveToLocation" class="page-body-button" type="primary">移動位置</button>
    <!-- 移動標註位置事件監聽 -->
    <button bindtap="translateMarker" class="page-body-button" type="primary">移動標註</button>
    <!-- 縮放視野展示所有經緯度事件監聽 -->
    <button bindtap="includePoints" class="page-body-button" type="primary">縮放視野展示所有經緯度</button>
  </view>
</view>

主要的就是這兩個檔案，wxss檔案就一個樣式，並且還沒有什麼特別的，所以就不貼上來了。

我們執行模擬器看一下效果圖：

看地圖中的綠色標記就可以看到data中基礎經緯度定位的位置，然後我們來操作一下四個事件監聽。

1.獲取位置，點選獲取位置可以看到控制檯有了對應輸出：

2.移動位置，點選移動位置可以看到地圖中心點直接move到了當前的經緯度地址，為了方便觀看移動之後我們再次點選獲取：

3.移動標記，我們在data中定義了移動標記的位置，當我們點選移動標記時，標記會移動到data中指定經緯度的位置：

/**
   * 移動標註
   */
  translateMarker: function() {
    this.mapCtx.translateMarker({
      markerId: 1,
      autoRotate: true,
      duration: 1000,
      destination: {
        latitude:23.10229,
        longitude:113.3345211,
        iconPath: '/image/location.png'
      },
      animationEnd() {
        console.log('animation end')
      }
    })
  },

在控制檯列印出animation end之後，我們再次點選獲取位置，可以獲取到移動標記之後標記點的位置：

4.縮放視野展示所有經緯度，這個方法其實沒什麼說的，就是把點的集合縮放到一個可見的視野之內，這裡就不做過多的顯示了，自己進行操作和嘗試就可以了。

其實地圖元件只要按照官方文件給的方法進行操作就可以很好的展示出來，重要的是屬性的操作，屬性的值，以及取值區間等等，這裡就貼一部分，更多的到小程式map元件官網地址進行檢視

另外事件監聽的四個方法，在小程式的api裡面也都包含的有，詳情也可以查閱小程式API文件

地圖元件的介紹就這麼多了~