vue高德地图 marker 点击事件

在Vue中使用高德地图（AMap）添加marker并绑定点击事件，首先你需要安装`vue-amap`这个官方提供的Vue组件库。以下是一个基本示例：

<template>
  <div id="map">
    <amap :center="center" zoom="15">
      <amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position">
        <template #default="{ marker }">
          <button @click="handleMarkerClick(index)">点击标记</button>
        </template>
      </amap-marker>
    </amap>
  </div>
</template>

<script>
import AMap from 'vue-amap';

export default {
  components: {
    AMap,
  },
  data() {
    return {
      center: [116.404, 39.915], // 北京坐标
      markers: [
        { position: [116.404, 39.915], title: '北京' },
        { position: [121.4737, 31.2304], title: '上海' }, // 其他标记点
      ],
    };
  },
  methods: {
    handleMarkerClick(index) {
      console.log(`点击了第${index}个标记`);
      // 这里可以执行对应标记的业务逻辑
    },
  },
};
</script>

在这个例子中，我们创建了一个`markers`数组来存储每个标记的位置和标题。在模板中，每个`amap-marker`都有一个按钮，当按钮被点击时，会触发`handleMarkerClick`方法，并传入当前标记的索引。