uniapp @markertap 事件的使用方法

在uniapp中，@markertap事件的具体使用方法是什么？我在map组件上绑定了@markertap事件，但是点击marker时没有触发回调函数。是否需要额外配置参数？正确的回调函数参数结构是怎样的？有没有完整的示例代码可以参考？

2 回复

在uniapp中，@markertap是地图组件的标记点点击事件。使用方法：

  1. 在地图组件添加事件：
<map [@markertap](/user/markertap)="handleMarkerTap"></map>
  1. 在methods中定义方法：
handleMarkerTap(e) {
  console.log('点击了标记点', e.markerId)
}

参数e包含markerId，可获取被点击标记的id。


在 UniApp 中，@markertap 是地图组件（<map>）的标记点点击事件，用于响应用户点击地图上的标记点（marker）。以下是使用方法和示例：

基本语法

<template>
  <view>
    <map
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      @markertap="handleMarkerTap"
    ></map>
  </view>
</template>

示例代码

<script>
export default {
  data() {
    return {
      latitude: 39.909,
      longitude: 116.39742,
      markers: [{
        id: 1,
        latitude: 39.909,
        longitude: 116.39742,
        title: '位置A'
      }]
    }
  },
  methods: {
    handleMarkerTap(e) {
      // 获取被点击标记点的 ID
      const markerId = e.markerId
      
      // 根据 ID 处理业务逻辑
      uni.showToast({
        title: `点击了标记点 ${markerId}`,
        icon: 'none'
      })
      
      // 示例：跳转页面并传递参数
      // uni.navigateTo({
      //   url: `/pages/detail?id=${markerId}`
      // })
    }
  }
}
</script>

关键说明

  1. 事件对象：e.markerId 返回被点击标记点的 ID
  2. 标记点配置：确保 markers 数组中的每个标记点都有唯一的 id
  3. 地图基础设置：需要正确设置 latitude 和 longitude 确定地图中心点

注意事项

  • 需在 pages.json 中申请地图权限
  • 真机调试时请使用自有 AppID 并配置域名白名单
  • 可通过 markers 数组动态更新标记点

通过这个事件可以实现标记点点击交互，如显示详情、导航、弹窗等业务逻辑。

回到顶部