uni-app map控件的@tap事件返回detail为空
uni-app map控件的@tap事件返回detail为空
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
Windows | win10 | HBuilderX |
产品分类:
uniapp/App
PC开发环境操作系统:
Windows
HBuilderX类型:
正式
HBuilderX版本号:
4.43
手机系统:
Android
手机系统版本号:
Android 11
手机厂商:
小米
手机机型:
红米9
页面类型:
vue
vue版本:
vue3
打包方式:
离线
示例代码:
<map style="width: 100%; height: 50vh;" id="map" class="map" :show-location="true" :latitude="latitude"
:longitude="longitude" :markers="markers" [@tap](/user/tap)="tap"></map>
```
操作步骤:
<map style="width: 100%; height: 50vh;" id="map" class="map" :show-location="true" :latitude="latitude"
:longitude="longitude" :markers="markers" [@tap](/user/tap)="tap"></map>
``
预期结果:
<map style="width: 100%; height: 50vh;" id="map" class="map" :show-location="true" :latitude="latitude"
:longitude="longitude" :markers="markers" [@tap](/user/tap)="tap"></map>
``
实际结果:
<map style="width: 100%; height: 50vh;" id="map" class="map" :show-location="true" :latitude="latitude"
:longitude="longitude" :markers="markers" [@tap](/user/tap)="tap"></map>
``
bug描述:
{"defaultPrevented":false,"timeStamp":0,"_stop":false,"_end":false,"type":"onTap","bubbles":false,"cancelable":false,"target":{"dataset":{},"id":"map","offsetLeft":0,"offsetTop":0},"detail":{},"currentTarget":{"dataset":{},"id":"map","offsetLeft":0,"offsetTop":0}}
在uni-app中,map
控件的@tap
事件确实可能会遇到返回的detail
为空的情况。这通常是因为@tap
事件并不是专门设计来获取地图点击的详细信息,它更多地用于处理普通的点击事件。对于地图的点击事件,你应该使用@markertap
(标记点击)或@callouttap
(标注点击)事件来获取点击的详细信息。
下面是一个使用@markertap
事件的代码示例,它展示了如何在点击地图标记时获取点击的详细信息:
<template>
<view>
<map
id="map"
:longitude="longitude"
:latitude="latitude"
:scale="scale"
:markers="markers"
@markertap="onMarkerTap"
style="width: 100%; height: 300px;"
></map>
</view>
</template>
<script>
export default {
data() {
return {
longitude: 116.404,
latitude: 39.915,
scale: 15,
markers: [
{
id: 1,
latitude: 39.915,
longitude: 116.404,
title: 'Beijing',
iconPath: '/static/marker.png',
width: 50,
height: 50,
},
],
};
},
methods: {
onMarkerTap(e) {
console.log('Marker tapped:', e.detail);
// e.detail 将包含被点击的 marker 的详细信息
// 例如: {markerId: 1, latitude: 39.915, longitude: 116.404}
},
},
};
</script>
<style scoped>
/* 添加你的样式 */
</style>
在这个例子中,我们定义了一个地图,并在地图上放置了一个标记。当用户点击这个标记时,onMarkerTap
方法会被触发,并且e.detail
将包含被点击标记的详细信息,如markerId
、latitude
和longitude
等。
如果你确实需要在地图的非标记区域获取点击信息,你可能需要使用@tap
事件并结合地图的getContext
方法(如果支持的话)来获取更详细的点击坐标信息,但这通常不是标准做法,因为@tap
事件并不保证能提供地图点击的详细信息。
总之,对于地图点击事件的处理,建议使用@markertap
或@callouttap
等专门的事件,以确保能够获取到详细的点击信息。