微信小程序使用地图组件

地图组件，官网使用方法：

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": "使用地图服务将使用您的位置信息"
    }
  }