首先去騰訊地圖配置 小程序?qū)?yīng)的keyhttps://lbs.qq.com/console/mykey.html
并且在微信公眾平臺(tái)中開通騰訊位置服務(wù)
開通服務(wù).png
用到騰訊地圖中其他功能則需要導(dǎo)入騰訊地圖的擴(kuò)展包，且聲明
const QQMapWX = require('../../utils/qqmap-wx-jssdk.js')
mapsdk = new QQMapWX({
key: '你申請(qǐng)的key'
})
如果只是部分內(nèi)容則只需要用小程序api中的功能即可
首先在wxml中加入map組件 相關(guān)屬性介紹小程序文檔-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中創(chuàng)建Map對(duì)象
this.mapCtx = wx.createMapContext('myMap')
地圖的中心位置自己按需求修改，正常是定位位置作為中心湿滓，所以用到wx.getlocation
wx.getLocation({
success(res) {
console.log(res)
that.setData({
lat: res.latitude, //設(shè)置中心緯度
lon: res.longitude, //經(jīng)度
markers_L: [{ //設(shè)置中心點(diǎn)的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', //常顯狀態(tài)
padding: 10
}
}]
})
app.globalData.lat = res.latitude
app.globalData.lon = res.longitude
}
})
氣泡框makers的點(diǎn)擊用bindcallouttap會(huì)返回callout的id啤它，再做相應(yīng)的邏輯跳轉(zhuǎn)之類
視野偏差、scale的改變 都可以用到bindregionchange芍躏，因?yàn)槲倚枰鶕?jù)縮放大小去更改點(diǎn)的數(shù)量
//視野變化
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]
})
}
}
})
}
},
展示
————————————
因?yàn)閷?shí)際需求和設(shè)計(jì)圖都沒出來奠涌，所以只是先熟悉下宪巨，后面再填坑
