uni-app map控件的@tap事件返回detail为空

发布于 1周前 作者 itying888 来自 Uni-App

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}}

1 回复

在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将包含被点击标记的详细信息,如markerIdlatitudelongitude等。

如果你确实需要在地图的非标记区域获取点击信息,你可能需要使用@tap事件并结合地图的getContext方法(如果支持的话)来获取更详细的点击坐标信息,但这通常不是标准做法,因为@tap事件并不保证能提供地图点击的详细信息。

总之,对于地图点击事件的处理,建议使用@markertap@callouttap等专门的事件,以确保能够获取到详细的点击信息。

回到顶部