微信小程序地图实现点击气泡，展示callout，开发过程中遇到的需求，大致就和共享单车那个差不多，在很多个marker中点击一个marker，显示不同颜色的marker，没有点击的则展示正常状态的marker，不bb了，直接上图看看：
image.png
image.png
大概就是这样的，啷个实现呢，来，直接上代码：
做这个之前先去下载一个这个东西 qqmap-wx-jssdk.js （ 官网下载地址https://lbs.qq.com/qqmap_wx_jssdk/index.html 以及 key
下载好之后，直接上代码了，没下载，我文章后面放代码片断，开发者工具直接打开就有了
上菜要分先后，那我先来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）其实可以不上的，这样为了美观一点
.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({
/**
* 页面的初始数据
*/
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
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var _this = this
// 实例化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号',
latitude: 30.55060000,
longitude: 104.07125900,
id: 900000000,
callout: {
display: 'BYCLICK'
}
}, {
iconPath: '../../assets/location.png',
width: 25,
height: 25,
address: '天府软件园A3号',
latitude: 30.53031088,
longitude: 104.07234101,
id: 900000001,
callout: {
display: 'BYCLICK'
}
}, {
iconPath: '../../assets/location.png',
width: 25,
height: 25,
address: '天府软件园A2号',
latitude: 30.52031088,
longitude: 104.05234101,
id: 900000002,
callout: {
display: 'BYCLICK'
}
}]
that.setData({
markers: arr
})
}
})
},
// marker的点击事件
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` // 转换成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)
},
})
}
})
}
})
大功告成，开饭
还有那个点击回到当前位置的，上面js里面有，添加一个点击事件
/**
* 回到自己位置
*/
controltap() {
this.mapCtx.moveToLocation()
this.getMyLocation()
this.setData({
scale: 17
})
},
// 初始化的时候生成定义一下
onReady: function (e) {
this.mapCtx = wx.createMapContext('myMap')
}
最后，也不耽搁大家时间，还要去创建新项目啥的，那么我把代码片单分享到这里，
（https://developers.weixin.qq.com/s/42Z8VYm87Jmt
）
直接在浏览器中打开这个就会跳转到代码片段里面看效果，我这里使用的加数据，来展示效果，实际使用的时候用后端返回的数据即可，
项目能正常运行，有不足之处，还请大神指点一二。
亲，觉得可以点个赞呀
网友评论