高德地图vue3 marker 点击事件

在Vue3中使用高德地图(Amap)组件时，Marker（标记点）的点击事件通常通过自定义事件或者v-on指令来处理。下面是一个简单的例子：

首先，在你的组件中安装高德地图插件，如`@vue-amap/core`和`@vue-amap/marker`：

npm install @vue-amap/core @vue-amap/marker

然后在模板部分设置Marker，并添加点击事件监听：

<template>
  <amap :center="mapCenter" :zoom="zoom">
    <amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position">
      <amap-popover @open="handleMarkerClick(index)" />
    </amap-marker>
  </amap>
</template>

<script setup>
import { useAMap } from '@vue-amap/core'
import { AMapMarker, AMapPopover } from '@vue-amap/marker'

const { map, amap } = useAMap()

// 假设markers是一个包含经纬度和其他数据的对象数组
let markers = ... // 初始化marker列表

const handleMarkerClick = (index) => {
  // 当点击某个Marker时，这里可以访问到对应的index，进一步操作如导航、弹窗显示等
  console.log(`Clicked on Marker at index ${index}`);
}
</script>

在这个例子中，当你点击每个Marker时，`handleMarkerClick`函数会被触发，你可以在此函数内部执行你需要的操作。