uniapp map @tap事件获取不到经纬度怎么办

在uniapp中使用map组件绑定了@tap事件，点击地图时无法获取到点击位置的经纬度，回调函数的参数中也没有相关数据。请问应该如何正确获取用户点击地图时的经纬度坐标？具体代码和配置是否有特殊要求？

2 回复

检查map组件的@tap事件回调参数，确保使用e.detail.latitude和e.detail.longitude获取经纬度。若仍无效，可能是组件版本问题，尝试更新HBuilderX或uni-app框架版本。


在UniApp中，使用<map>组件的@tap事件时，默认不会直接返回经纬度信息。可以通过以下方法解决：

解决方案：

  1. 使用@markertap事件（推荐）
    如果点击的是地图上的标记点（marker），该事件会返回经纬度。

    <template>
  <map @markertap="handleMarkerTap"></map>
</template>

<script>
export default {
  methods: {
    handleMarkerTap(e) {
      const { latitude, longitude } = e.detail.markerId
      console.log(latitude, longitude)
    }
  }
}
</script>

  2. 使用@regionchange或@poitap

    • @poitap：点击地图POI点时触发（需特定条件）。
    • @regionchange：地图区域变化时触发，可用于间接获取中心点坐标。

  3. 结合地图组件的属性和API
    通过getRegion或getCenterLocation方法主动获取位置：

    // 在map组件上添加ref
<map ref="myMap"></map>

// 调用方法
this.$refs.myMap.getCenterLocation({
  success: (res) => {
    console.log(res.latitude, res.longitude)
  }
})

注意事项：

  • @tap事件仅返回屏幕坐标，需通过地图API转换（UniApp未直接支持）。
  • 检查地图组件是否已正确初始化且权限正常。

根据需求选择合适的方法，通常推荐使用@markertap或主动调用地图API获取坐标。

回到顶部