uniapp map组件app端tap事件无法获取经纬度怎么解决？

在uniapp中使用map组件时，app端的tap事件无法获取经纬度，点击地图后回调函数中的e.detail参数为空。H5端可以正常获取经纬度，但app端无论怎么点击都拿不到坐标数据。请问这是什么原因导致的？有没有解决方法？代码片段如下：

<map @tap="handleTap"></map>

methods: {
  handleTap(e) {
    console.log(e.detail) // app端输出undefined
  }
}
2 回复

在uniapp中，map组件的tap事件在APP端默认不返回经纬度。解决方法：

  1. 使用@regionchange事件监听区域变化
  2. 结合@markertap获取标记点坐标
  3. 使用plus.maps创建原生地图
  4. 或使用@callouttap获取标注点信息

推荐使用@markertap配合自定义标记点来获取经纬度。


在uni-app中，map组件的tap事件在App端默认不会返回经纬度信息，需要通过配置或使用其他事件来解决。以下是解决方案：

1. 开启show-location属性（推荐） 在map组件上设置show-location="true"，并监听@tap事件：

<template>
  <map 
    :latitude="latitude" 
    :longitude="longitude"
    show-location
    @tap="handleMapTap"
  ></map>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.909,
      longitude: 116.39742
    }
  },
  methods: {
    handleMapTap(e) {
      // 此时可以获取到经纬度
      console.log('经纬度:', {
        latitude: e.detail.latitude,
        longitude: e.detail.longitude
      })
    }
  }
}
</script>

2. 使用@regionchange事件（适用于需要持续监听区域变化）

<map 
  @regionchange="onRegionChange"
  @tap="handleTap"
></map>

<script>
export default {
  methods: {
    onRegionChange(e) {
      if(e.type == 'end') {
        // 获取地图中心点坐标
        console.log('中心点经纬度:', e.detail.centerLocation)
      }
    },
    handleTap(e) {
      // 普通点击事件
      console.log('地图被点击')
    }
  }
}
</script>

注意事项：

  • show-location属性会显示定位按钮，同时激活tap事件的经纬度返回
  • 如果只需要获取点击位置的经纬度，方案1是最直接的
  • 确保在manifest.json中已配置地图权限：
{
  "app-plus": {
    "modules": {
      "Maps": {}
    }
  }
}

通过以上配置，即可在App端正常获取map组件tap事件的经纬度信息。

回到顶部