uni-app 内置组件 map 的 @callouttap 事件无法获取 markerId
uni-app 内置组件 map 的 @callouttap 事件无法获取 markerId
项目属性 | 信息 |
---|---|
产品分类 | uniapp/App |
PC开发环境 | Windows |
PC开发环境版本 | win11 |
HBuilderX类型 | 正式 |
HBuilderX版本 | 4.01 |
手机系统 | Android |
手机系统版本 | Android 14 |
手机厂商 | 华为 |
手机机型 | vivo |
页面类型 | vue |
vue版本 | vue3 |
打包方式 | 云端 |
项目创建方式 | HBuilderX |
示例代码:
<map
:latitude="centerLat"
:longitude="centerLng"
:enable-3D="true"
:markers="markers"
@markertap="onClick"
[@callouttap](/user/callouttap)="onClick"
/>
操作步骤:
- 11
预期结果:
- 11
实际结果:
- 11
bug描述:
内置组件map的@callouttap事件,e.detail = {markerId}拿不到markerId,显示NaN
@markertap="onClick"这个能拿到,而@callouttap="onClick"拿不到
看我下面回复,请你指出我如何复现和验证你的问题。
大佬解决了吗,我也是同样问题
看我下面回复,请你指出我如何复现和验证你的问题。
现在解决了吗,我也拿不到那个值
看我下面回复,请你指出我如何复现和验证你的问题。
回复 DCloud_UNI_OttoJi: web端
感谢反馈,你提到 hbuilderx 运行 vue3 项目在安卓平台拿不到 callouttap ,我验证下。
在版本3.0.0-4020320240708001,网页端onCallouttap的e.detail.markerId确实拿不到,微信小程序可以
什么时候能修复啊 急急急
在 uni-app
中,map
组件的 @callouttap
事件确实存在无法直接获取 markerId
的问题。这是因为 @callouttap
事件回调的参数中并没有直接提供 markerId
的信息。
解决方法
为了在 @callouttap
事件中获取 markerId
,你可以通过以下方式实现:
-
使用
markers
数组的索引:在markers
数组中,每个marker
都有一个唯一的id
。你可以在markers
数组中根据索引找到对应的marker
,从而获取markerId
。 -
自定义
marker
的callout
内容:在marker
的callout
中添加自定义数据,然后在@callouttap
事件中通过e.detail.markerId
获取。
示例代码
<template>
<view>
<map
:markers="markers"
@callouttap="handleCalloutTap"
style="width: 100%; height: 300px;"
></map>
</view>
</template>
<script>
export default {
data() {
return {
markers: [
{
id: 1,
latitude: 39.909,
longitude: 116.39742,
title: 'Marker 1',
callout: {
content: 'Marker 1 Callout',
color: '#ffffff',
fontSize: 14,
borderRadius: 5,
bgColor: '#007AFF',
padding: 5,
display: 'ALWAYS',
// 自定义数据
customData: {
markerId: 1
}
}
},
{
id: 2,
latitude: 39.919,
longitude: 116.40742,
title: 'Marker 2',
callout: {
content: 'Marker 2 Callout',
color: '#ffffff',
fontSize: 14,
borderRadius: 5,
bgColor: '#007AFF',
padding: 5,
display: 'ALWAYS',
// 自定义数据
customData: {
markerId: 2
}
}
}
]
};
},
methods: {
handleCalloutTap(e) {
// 通过自定义数据获取 markerId
const markerId = e.detail.markerId;
console.log('Callout tapped, markerId:', markerId);
// 其他处理逻辑
}
}
};
</script>