微信小程序使用地圖組件

地圖組件，官網使用方法：

https://developers.weixin.qq.com/miniprogram/dev/component/map.html

 

1. 有個問題：

如果設置爲 style="width: 100%; height: 300px;"

100%，則

無法顯示地圖。width改爲300px則顯示ok。

原因是包裹地圖的view的配置問題，要一致。

例如：

<view class="page-section page-section-gap">
    <map
      id="myMap"
      style="width: 100%; height: {{mapHeight}}px;"
      scale="15"
      latitude="{{latitude}}"
      longitude="{{longitude}}"
      markers="{{markers}}"
      covers="{{covers}}"
      show-location
      bindtap='onMapTap'
	subkey="xxxx-xxxx-xxxx-xxxx-xxxx-xxxx"
    ></map>
  </view>

 

.page-section-gap{
  width: 96%;
  height: width;
  box-sizing: content-box;
  padding: 5rpx;
  margin-top: 20rpx;
  background-color: rgb(231, 201, 33);
}

 

2. 功能

官方的功能，加上一個點擊選點的功能

3. 一些代碼片段如下：

view

<view class="page-section page-section-gap">
    <map
      id="myMap"
      style="width: 300px; height: 300px;"
      scale="15"
      latitude="{{latitude}}"
      longitude="{{longitude}}"
      markers="{{markers}}"
      covers="{{covers}}"
      show-location
      bindtap='onMapTap'
      subkey="xxxx-DH7KI-xxxx-5XABN-QSQC5-xxxx"
    ></map>
  </view>
  <view class="btn-area">
    <button bindtap="locateToCurrent" 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>

data

  data: {
    latitude: 23.099994,
    longitude: 113.32400501586912,
    markers: [{
      id: 1,
      latitude: 23.099994,
      longitude: 113.32400501586912,
      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'
    }]
  }

functions

  onReady: function (e) {
    that = this
    that.mapCtx = wx.createMapContext('myMap')

  },

  locateToCurrent: function () {
    wx.getLocation({
      type: 'gcj02',
      success(res) {
        const lati = res.latitude
        const longi = res.longitude
        const speed = res.speed
        const accuracy = res.accuracy
        that.setData({ latitude: lati })
        that.setData({ longitude: longi })
        that.setData({markers: [{
          id: 1,
          latitude: that.data.latitude,
          longitude: that.data.longitude,
          name: 'T.I.T 創意園'
        }]})
        console.log("lat=" + lati + ", longi=" + longi)
        that.mapCtx.moveToLocation()
      }
    })
  },

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

  onMapTap: function () {
    wx.chooseLocation({
      success: function (res) {
        console.log("onmaptap:success：" + JSON.stringify(res))
        const lati = res.latitude
        const longi = res.longitude
        that.setData({latitude: lati})
        that.setData({longitude: longi})
        that.setData({markers: [{
          id: 1,
          latitude: that.data.latitude,
          longitude: that.data.longitude,
          name: 'T.I.T 創意園'
        }]})
        
        that.mapCtx.moveToLocation();
      },
      fail: function (res) {
        console.log("onmaptap:fail: " + JSON.stringify(res))
      },
      complete: function (res) {
        console.log("onmaptap:complete: " + JSON.stringify(res))
      }
    })
  }

permission

  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "使用地圖服務將使用您的位置信息"
    }
  }