<template>
<view class="my-wrap">
<view>
<view v-if="showTs" @click="onclickOne">
1
</view>
</view>
<view class="my-map-wrap">
<map id="jsmap" class="my-map" enable-3D="true" show-scale="true"
enable-building="true"
show-location="true"
:scale="19"
@markertap="onClickMarker">
<view>
<button @click="onClickMapControlGetLocal">地图定位图标</button>
</view>
</map>
</view>
<view>
<button @click="onClickTs">开始测试</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
map: {
longitude: 111.411067,
latitude: 22.189381,
scale: 19,
markers: [],
},
g_map: null,
showTs: false,
}
},
onLoad() {
},
onReady() {
this.init();
},
methods: {
init() {
this.g_map = uni.createMapContext('jsmap');
this.getLocation();
},
getLocation() {
this.g_map.moveToLocation({
longitude: this.map.longitude,
latitude: this.map.latitude,
success: (res) => {
wx.showToast({
title: '定位成功',
icon: 'success',
duration: 2000
})
},
fail: (res) => {
console.log('moveToLocation fail:' + JSON.stringify(res));
}
});
let marker = {
id: 1,
latitude: this.map.latitude,
longitude: this.map.longitude,
width: 60,
height: 60,
};
this.g_map.addMarkers([marker]);
this.g_map.addMarkers({
markers: [marker],
clear: true, // 是否先清空地图上所有 marker
success: (res) => {
// console.log('addMarkers success:' + JSON.stringify(res));
},
fail: (res) => {
console.log('addMarkers fail:' + JSON.stringify(res));
}
});
},
onClickMarker(e) {
wx.showToast({
title: '你已经点击了Marker',
icon: 'success',
duration: 2000
})
},
onclickOne() {
wx.showToast({
title: '你已经点击了1',
icon: 'success',
duration: 2000
})
},
onClickTs() {
this.showTs = true;
},
onClickMapControlGetLocal() {
wx.showToast({
title: '你已经点击了地图定位按钮',
icon: 'error',
duration: 2000
})
}
}
}
</script>
<style scoped lang="scss">
.my-wrap {
display: flex;
height: 100%;
flex-direction: column;
background: #F5F5F5;
}
.my-map-wrap {
flex: 1;
overflow: hidden;
.my-map {
width: 100%;
height: 100%;
}
}
</style>
- 发布:2023-12-14 11:27
- 更新:2023-12-14 19:19
- 阅读:295
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win11专业版21H2
HBuilderX类型: 正式
HBuilderX版本号: 3.98
第三方开发者工具版本号: stable 1.06.2308310
基础库版本号: 3.2.2
项目创建方式: HBuilderX
App下载地址或H5⽹址: 小程序代码片段:https://developers.weixin.qq.com/s/2DMonqml7ENF
示例代码:
操作步骤:
1。等待定位成功,见到地图中间出现一个红色坐标图标
2。这时候(正常的时候),点击这个红色定位图标,会提示”你已经点击了Marker”
3。点击下方的”开始测试”按钮,这时候的map上方左上角,会出现一个1字
4。这时候,再次点击地图中的那个红色图标,会提示”你已经点击了地图定位按钮”
1。等待定位成功,见到地图中间出现一个红色坐标图标
2。这时候(正常的时候),点击这个红色定位图标,会提示”你已经点击了Marker”
3。点击下方的”开始测试”按钮,这时候的map上方左上角,会出现一个1字
4。这时候,再次点击地图中的那个红色图标,会提示”你已经点击了地图定位按钮”
预期结果:
预期是无论什么情况下,点击地图中红色图标,都提示”你已经点击了Marker”
预期是无论什么情况下,点击地图中红色图标,都提示”你已经点击了Marker”
实际结果:
实际是在map上方出现任意标签变动后(则是点击了开始测试按钮后,map上方出现了1后),再次点击地图红色图标,会触发map组件内部的任意一个标签的点击事件。有时候会触发第一个,有时候会触发第二个(如果你的map里面有其他view的点击事件)。
实际是在map上方出现任意标签变动后(则是点击了开始测试按钮后,map上方出现了1后),再次点击地图红色图标,会触发map组件内部的任意一个标签的点击事件。有时候会触发第一个,有时候会触发第二个(如果你的map里面有其他view的点击事件)。
bug描述:
先说明,这个bug,在微信小程序原生语法下,是没问题的,说明是uniapp的问题。具体可以用下面提供的微信小程序代码片段进行验证。
情况是这样,我希望map里面的marker,无论什么情况下,点击都能执行一样的逻辑。但是,发现,当动态控制map组件上方的dom动态出现的情况下,这个dom是否出现,会直接影响map里的marker的点击事件逻辑。
要满足这个bug的出现,需要满足这几个条件:
1。map组件上方的dom需要动态出现,不是静态写死。
2。map组件上方的dom,需要有点击事件,例如@click="",也行。
3。map组件内部,需要有至少一个dom(一般map上都会放一个定位到我的位置的按钮),并且这个dom需要声明到点击事件,例如@click="",也行。
这时候,按照我下面的复现步骤执行,就会复现这个bug。这个bug在开发工具上不会出现,只有真机(android和ios都有,预览调试方式,和体验版)会出现。
而且当出现bug的时候,在手机端的小程序调试模式的窗口里(注意,不能用微信开发工具的真机调试模式,要用预览方式调试),可以看到一句蓝色的异常:Invoke event eX in component:page/。。。。这个X,可能是1,2,3,4,这个视乎你的map组件内部有多少个dom声明了点击事件,这个bug随机执行了哪个事件,X就是几-1。网上也有人提过这个bug,具体可以参考这里→链接
目前我只能把这个map上方的dom,挪到map的下方,就不会出现这个问题。期待官方能修复。
kidd (作者)
大佬,我相信你的推断。只是想请教一下,为什么挪到下方,或者用v-show,就没问题?按照你的代码片段来看,是动态修改了bindmarkertap的点击事件名字。而我的这个例子,并没有改动过bindmarkertap的事件名字。这也是同一个bug导致吗?
2023-12-15 10:20
YUANRJ
回复 kidd: uni-app在小程序端绑定事件的元素每次切换v-if时,会动态更改后面元素所绑定的事件名,所以你挪到下方或使用v-show是不会动态更改bindmarkertap的事件名。uni-app 后续也会考虑优化这个问题。
2023-12-15 11:29