uni-app 高德地图在H5的tap事件无法获取坐标轴

在 uni-app 中使用高德地图时，如果你在 H5 环境下遇到 tap 事件无法获取坐标轴的问题，可能是因为高德地图的 H5 版本在事件处理上与小程序或原生应用有所不同。以下是一些可能的解决方案和排查步骤：

1. 确保正确绑定 tap 事件

首先，确保你正确绑定了 tap 事件。例如：

<template>
  <map
    id="map"
    style="width: 100%; height: 100%;"
    :latitude="latitude"
    :longitude="longitude"
    :markers="markers"
    @tap="handleTap"
  ></map>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.909,
      longitude: 116.397,
      markers: []
    };
  },
  methods: {
    handleTap(event) {
      console.log('Tap event:', event);
      // 获取坐标
      console.log('Latitude:', event.detail.latitude);
      console.log('Longitude:', event.detail.longitude);
    }
  }
};
</script>

2. 使用 @click 事件替代 @tap

在某些情况下，H5 环境下 @tap 事件可能无法正常工作。你可以尝试使用 @click 事件来替代：

<map
  id="map"
  style="width: 100%; height: 100%;"
  :latitude="latitude"
  :longitude="longitude"
  :markers="markers"
  @click="handleClick"
></map>

methods: {
  handleClick(event) {
    console.log('Click event:', event);
    // 获取坐标
    console.log('Latitude:', event.detail.latitude);
    console.log('Longitude:', event.detail.longitude);
  }
}

3. 检查高德地图的 H5 支持

确保你使用的是高德地图的 H5 版本，并且该版本支持 tap 事件。你可以查阅高德地图的官方文档，确认 H5 环境下支持的事件类型。

4. 使用原生 JavaScript 事件监听

如果 @tap 或 @click 事件仍然无法获取坐标，你可以尝试使用原生 JavaScript 的事件监听器来监听地图的点击事件：

mounted() {
  const map = document.getElementById('map');
  map.addEventListener('click', (event) => {
    console.log('Native click event:', event);
    // 获取坐标
    const latitude = event.detail.latitude;
    const longitude = event.detail.longitude;
    console.log('Latitude:', latitude);
    console.log('Longitude:', longitude);
  });
}

5. 检查高德地图的初始化

确保高德地图已经正确初始化，并且在初始化后绑定事件：

mounted() {
  const map = new AMap.Map('map', {
    center: [this.longitude, this.latitude],
    zoom: 13
  });

  map.on('click', (event) => {
    console.log('AMap click event:', event);
    const lnglat = event.lnglat;
    console.log('Longitude:', lnglat.lng);
    console.log('Latitude:', lnglat.lat);
  });
}