小程序開發-Map地圖組件

Map組件

• 是原生組件，使用時請注意相關限制。個性化地圖能力可在小程序后台“設置-開發者工具-騰訊位置服務”申請開通。 設置subkey后，小程序內的地圖組件均會使用該底圖效果，底圖場景的切換會在后續版本提供。
  詳見《小程序個性地圖使用指南》
• 官方文檔地址 https://developers.weixin.qq.com/miniprogram/dev/component/map.html

本文主要展示地圖組件的幾個能力：

• 經緯度轉預覽圖
• 經緯度轉大圖
• 地理位置轉經緯度
• 預覽圖縮放

最終效果：

wsml代碼如下：

<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="chooseLocation" class="page-body-button" type="primary">選擇位置</button>
    <button bindtap="openLocation" class="page-body-button" type="primary">打開位置</button>
    <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> 

部分代碼如下：

Page({
  data: {
    latitude: 23.099994,
    longitude: 113.324520,
    markers: [{
      id: 1,
      latitude: 23.099994,
      longitude: 113.324520,
      name: 'T.I.T 創意園'
    }],
    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')
  },
  chooseLocation:function(){
    var that = this;
    wx.chooseLocation({
      success: function (res) {
        console.log(res, "location")
        console.log(res.name)
        console.log(res.latitude)
        console.log(res.longitude)
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude
        })
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })
  },
  openLocation:function(){
    var that = this;
    wx.openLocation({
      latitude: that.data.latitude,
      longitude: that.data.longitude,
      scale: 18
    })
  },
  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,
      }]
    })
  }
})

.page-section-gap{
  box-sizing: border-box;
  padding: 0 30rpx;
}
.page-body-button {
  margin-bottom: 30rpx;
}