微信小程序-地图控件的使用

首先去腾讯地图配置 小程序对应的keyhttps://lbs.qq.com/console/mykey.html
并且在微信公众平台中开通腾讯位置服务

开通服务.png

用到腾讯地图中其他功能则需要导入腾讯地图的扩展包，且声明

const QQMapWX = require('../../utils/qqmap-wx-jssdk.js')
mapsdk = new QQMapWX({
   key: '你申请的key'
})

如果只是部分内容则只需要用小程序api中的功能即可
首先在wxml中加入map组件 相关属性介绍小程序文档-map组件

在onload，或者onshow中创建Map对象

this.mapCtx = wx.createMapContext('myMap')

地图的中心位置自己按需求修改，正常是定位位置作为中心，所以用到wx.getlocation

wx.getLocation({
      success(res) {
        console.log(res)
        that.setData({
          lat: res.latitude,    //设置中心纬度
          lon: res.longitude,    //经度
          markers_L: [{      //设置中心点的maker，表示自身位置
            id: 0,
            latitude: res.latitude,
            longitude: res.longitude,
            iconPath: '/images/location.png',
            width: 20,
            height: 20,
            zIndex:99,
            callout: {
              content: '我的位置',
              color: '#333',
              fontSize: 12,
              borderRadius: 8,
              display: 'ALWAYS',    //常显状态
              padding: 10
            }
          }]
        })
        app.globalData.lat = res.latitude
        app.globalData.lon = res.longitude
      }
    })

气泡框makers的点击用bindcallouttap会返回callout的id，再做相应的逻辑跳转之类

视野偏差、scale的改变 都可以用到bindregionchange，因为我需要根据缩放大小去更改点的数量

//视野变化
  regionchange(e){
    // console.log(e)
    let that = this
    if(e.causedBy=='scale'){
      this.mapCtx.getScale({
        success: (res) => {
          console.log(res)
          if (res.scale<=16) {
            this.setData({
              markers: [...that.data.markers_L,...that.data.markers_16]
            })
          }else if(res.scale>=17){
            this.setData({
              markers: [...that.data.markers_L,...that.data.markers_17]
            })
          }
        }
      })
    }
  },

展示

————————————
因为实际需求和设计图都没出来，所以只是先熟悉下，后面再填坑