首先去腾讯地图配置 小程序对应的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组件
<map
id="myMap"
style="width: 100%; height: 300px;"
longitude="{{lon}}" latitude="{{lat}}"
scale='16'
subkey="你的key"
polyline="{{polyline}}"
markers="{{markers}}"
bindcallouttap="calloouthandle"
bindregionchange="regionchange"
></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]
})
}
}
})
}
},
展示
————————————
因为实际需求和设计图都没出来，所以只是先熟悉下，后面再填坑
