效果如下所示:
地图拖动
由于地图自带的marker的lable属性无法设置固定宽高,无法达到想要的样式效果。
所以采用手写样式的方式,来实现需求。
思路:
样式:通过绝对定位的方式,将地图icon标记定位到地图的中心,再通过绝对定位的方式,将位置信息,显示到地图icon的上方。
功能:当用户拖动地图时,调用地图的@regionchange功能,获取地图中心的经纬度,通过经纬度获取具体的位置信息,然后更新到地图标记上方
<map @regiοnchange="mapChange" class="map" id="isMap">
// 地图发生变化
mapChange() {
console.log('地图拖动')
let that = this
uni.createMapContext("isMap", this).getCenterLocation({
success(e) {
that.getPosition(e.latitude, e.longitude)
}
})
},
// 获取位置
getPosition(lat, lng) {
uni.request({
url: 'https://apis.map.qq.com/ws/geocoder/v1/',
data: {
key: this.wxMapKey,
callbackName: "getJsonData",
location: `${lat},${lng}`
},
success: (res) => {
//返回的res中包含具体的位置信息
console.log(res)
}
)}
},