微信小程序地图的使用
# 注意事项
- template 部分
<map @regionchange="changeCenterLocation" id="map1" :show-location="true" @callouttap="callouttap"
@markertap="markertap" style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude"
:markers="covers">
</map>
1
2
3
4
2
3
4
changeCenterLocation为视野中心变化函数,可以在拖动结束后,计算当前经纬度距离视野中心的位置
changeCenterLocation(e) {
// if (e.type == 'end' && e.detail.causedBy == "drag") { // 拖动结束获取中心点坐标
if (e.type == 'end') {
this.centerPoint = {
latitude: e.detail.centerLocation.latitude,
longitude: e.detail.centerLocation.longitude
}
}
// console.log(99, e.detail,e.detail.centerLocation)
},
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
- 手动控制地图中心点
uni.createMapContext("map1", this).moveToLocation({
latitude: res.latitude,
longitude: res.longitude,
success: (complete) => {
// 进行成功之后的相关操作
},
complete:(complete) => {
console.log(99, complete)
}
})
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
上次更新: 2024/03/31, 18:31:51