效果展示
- 主要包括:借助高德或腾讯地图API → 获取当前位置 + 标记位置点 + 计算二者距离
- 源代码:详见本博客【资源】部分
主要参考
- 微信小程序map地图组件之拓展功能:指南针显示与否、旋转开启与否、缩放开启与否、拖动开启与否以及卫星图开启与否。
微信小程序—地图组件map-功能扩展_0禾呈0的博客-CSDN博客https://blog.csdn.net/qq_41386332/article/details/103537189
#index.js
showCompass: true,
enableZoom: true,
enableScroll: true,
enableRotate: true,
enableSatellite: true
#index.wxml
show-compass="{{showCompass}}"
enable-rotate="{{enableRotate}}"
enable-zoom="{{enableZoom}}"
enable-scroll="{{enableScroll}}"
enable-satellite="{{enableSatellite}}"
关键代码
- index.js
var QQMapWX = require('qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
/**
* 页面的初始数据
*/
data: {
showCompass: true,
enableZoom: true,
enableScroll: true,
enableRotate: true,
enableSatellite: true,
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: '位置-红色.png',
width: 25,
height: 25,
address: '2020年4月24日20点30分 象群 农场八队底 森林边 温泉',
latitude: 22.2313995,
longitude: 100.3799973,
id: 900000000,
callout: {
display: 'BYCLICK'
}
}, {
iconPath: '位置-红色.png',
width: 25,
height: 25,
address: '2020年10月19日20点55分 另一象群 农场八队(温泉)农地;2020年11月14日19点50分+2020年11月15日11点30分+2020年11月16日20点',
latitude: 22.2320004,
longitude: 100.3789978,
id: 900000001,
callout: {
display: 'BYCLICK'
}
}, {
iconPath: '位置-红色.png',
width: 25,
height: 25,
address: '①2020年4月23日22点 象群 农场八队底 香蕉地;②2020年4月25日9点50分 大公象 象老四 农场八队(温泉)附近香蕉地;③2020年4月25日19点40分 大公象 农场八队(温泉)附近香蕉地',
latitude: 22.2327003,
longitude: 100.3809967,
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/1000)}km`
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: '位置-红色.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: '位置-红色.png',
callout: {
display: 'BYCLICK'
}
})
}
}
that.setData({
markers: arr
})
wx.hideLoading({
success: (res) => {
console.log(arr)
},
})
}
})
}
})
- index.wxml
<view class="page-section-gap">
<map id="myMap"
show-compass="{{showCompass}}"
enable-rotate="{{enableRotate}}"
enable-zoom="{{enableZoom}}"
enable-scroll="{{enableScroll}}"
enable-satellite="{{enableSatellite}}"
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="位置-红色.png" class="locationIcon"></image>
</view>
</view>
</view>