微信小程序地圖實(shí)現(xiàn)點(diǎn)擊氣泡，展示callout，開(kāi)發(fā)過(guò)程中遇到的需求，大致就和共享單車那個(gè)差不多，在很多個(gè)marker中點(diǎn)擊一個(gè)marker，顯示不同顏色的marker，沒(méi)有點(diǎn)擊的則展示正常狀態(tài)的marker，不bb了，直接上圖看看：
image.png
image.png
大概就是這樣的，啷個(gè)實(shí)現(xiàn)呢，來(lái)，直接上代碼：
做這個(gè)之前先去下載一個(gè)這個(gè)東西 qqmap-wx-jssdk.js （ 官網(wǎng)下載地址https://lbs.qq.com/qqmap_wx_jssdk/index.html 以及 key
下載好之后，直接上代碼了，沒(méi)下載，我文章后面放代碼片斷，開(kāi)發(fā)者工具直接打開(kāi)就有了
上菜要分先后，那我先來(lái)html（wxml）
<view class="page-section-gap">
<map id="myMap"
style="width: 100%; height: 100vh;"
latitude="{{latitude}}"
longitude="{{longitude}}"
markers="{{markers}}"
controls="{{controls}}"
scale="{{scale}}"
bindmarkertap="bindmarkertap"
bindcontroltap="controltap"
bindcallouttap="clickCallout"
bindtap="clearMap"
polyline="{{polyline}}"
show-location
show-scale show-compass>
</map>
<view class="contentBottomBox">
<view class="location" bindtap="controltap">
<image src="../../assets/Position.png" class="locationIcon"></image>
</view>
</view>
</view>
在上css（wxss）其實(shí)可以不上的，這樣為了美觀一點(diǎn)
.location {
float: right;
width: 80rpx;
height: 80rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin-right: 20rpx;
margin-bottom: 20rpx;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 2rpx 8rpx 0px rgba(0, 0, 0, 0.1);
}
.contentBottomBox {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.locationIcon {
width: 42rpx;
height: 42rpx;
}
最后上大菜了
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
mapKey: 'BURBZ-XE7K3-TS43N-YRIQT-XIMFS-72F4H',
latitude: '',
longitude: '',
distance: '',
distance: '',
scale: 16,
currMaker: {},
markers: []
},
/**
* 回到自己位置
*/
controltap() {
this.mapCtx.moveToLocation()
this.getMyLocation()
this.setData({
scale: 17
})
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
var _this = this
// 實(shí)例化API核心類
qqmapsdk = new QQMapWX({
key: _this.data.mapKey
})
this.getMyLocation()
},
onReady: function (e) {
this.mapCtx = wx.createMapContext('myMap')
},
// 獲取我的位置
getMyLocation: function () {
var that = this;
wx.getLocation({
type: 'gcj02',
success: function (res) {
that.setData({
latitude: res.latitude,
longitude: res.longitude
})
let arr = [{
iconPath: '../../assets/location.png',
width: 25,
height: 25,
address: '天府軟件園A1號(hào)',
latitude: 30.55060000,
longitude: 104.07125900,
id: 900000000,
callout: {
display: 'BYCLICK'
}
}, {
iconPath: '../../assets/location.png',
width: 25,
height: 25,
address: '天府軟件園A3號(hào)',
latitude: 30.53031088,
longitude: 104.07234101,
id: 900000001,
callout: {
display: 'BYCLICK'
}
}, {
iconPath: '../../assets/location.png',
width: 25,
height: 25,
address: '天府軟件園A2號(hào)',
latitude: 30.52031088,
longitude: 104.05234101,
id: 900000002,
callout: {
display: 'BYCLICK'
}
}]
that.setData({
markers: arr
})
}
})
},
// marker的點(diǎn)擊事件
bindmarkertap(e) {
console.log('e', e)
let that = this
let _markers = that.data.markers
let markerId = parseInt(e.detail.markerId)
wx.showLoading({
title: `${markerId}`,
})
_markers.forEach(item => {
console.log('item', item)
if (parseInt(item.id) === markerId) {
console.log('item', item)
that.setData({
currMaker: item
})
}
})
let currMaker = that.data.currMaker
console.log('currMaker', that.data.currMaker)
qqmapsdk.calculateDistance({
to: [{
latitude: currMaker.latitude,
longitude: currMaker.longitude
}],
success: function (res) {
let destinationDistance = res.result.elements[0].distance
let distanceKm = `${(destinationDistance)}m` // 轉(zhuǎn)換成m
let arr = []
for (let i = 0; i < _markers.length; i++) {
if (parseInt(_markers[i].id) === markerId) {
arr.push({
address: _markers[i].address,
latitude: _markers[i].latitude,
longitude: _markers[i].longitude,
id: _markers[i].id,
width: 40,
height: 40,
iconPath: '../../assets/location_point.png',
callout: {
content: `距您${distanceKm}`,
display: 'ALWAYS',
color: '#333333',
bgColor: '#fff',
padding: 10,
borderRadius: 10,
borderColor: '#fff',
fontSize: 16,
borderWidth: 5,
textAlign: 'center',
},
})
} else {
arr.push({
address: _markers[i].address,
latitude: _markers[i].latitude,
longitude: _markers[i].longitude,
id: _markers[i].id,
width: 25,
height: 25,
iconPath: '../../assets/location.png',
callout: {
display: 'BYCLICK'
}
})
}
}
that.setData({
markers: arr
})
wx.hideLoading({
success: (res) => {
console.log(arr)
},
})
}
})
}
})
大功告成，開(kāi)飯
還有那個(gè)點(diǎn)擊回到當(dāng)前位置的，上面js里面有，添加一個(gè)點(diǎn)擊事件
/**
* 回到自己位置
*/
controltap() {
this.mapCtx.moveToLocation()
this.getMyLocation()
this.setData({
scale: 17
})
},
// 初始化的時(shí)候生成定義一下
onReady: function (e) {
this.mapCtx = wx.createMapContext('myMap')
}
最后，也不耽擱大家時(shí)間，還要去創(chuàng)建新項(xiàng)目啥的，那么我把代碼片單分享到這里，
（https://developers.weixin.qq.com/s/42Z8VYm87Jmt
）
直接在瀏覽器中打開(kāi)這個(gè)就會(huì)跳轉(zhuǎn)到代碼片段里面看效果，我這里使用的加數(shù)據(jù)，來(lái)展示效果，實(shí)際使用的時(shí)候用后端返回的數(shù)據(jù)即可，
項(xiàng)目能正常運(yùn)行，有不足之處，還請(qǐng)大神指點(diǎn)一二。
親，覺(jué)得可以點(diǎn)個(gè)贊呀
