Vue是一种流行的JavaScript框架，而高德地图是一种常用的地图服务。在Vue中使用高德地图并点击标记是一个常见的需求。下面我将详细介绍如何在Vue中实现这个功能。

你需要在Vue项目中引入高德地图的JavaScript API。你可以通过在HTML文件中添加以下代码来引入API：

`html

请将your_api_key替换为你自己的高德地图API密钥。如果你还没有API密钥，可以在高德开放平台上注册并获取。
接下来，在Vue组件中，你可以使用mounted生命周期钩子函数来初始化地图并添加标记。在data中定义一个地图实例和标记数组：
`javascript
data() {
  return {
    map: null,
    markers: []
  };
},

然后，在mounted中初始化地图并添加标记：

`javascript

mounted() {

// 创建地图实例

this.map = new AMap.Map('mapContainer', {

zoom: 10, // 设置地图缩放级别

center: [lng, lat] // 设置地图中心点坐标

});

// 添加标记

const marker = new AMap.Marker({

position: [lng, lat], // 设置标记位置坐标

map: this.map // 将标记添加到地图上

});

// 监听标记的点击事件

marker.on('click', () => {

// 处理标记点击事件

// 可以在这里执行你想要的操作，比如显示信息窗口等

});

// 将标记添加到标记数组中

this.markers.push(marker);

},

在上面的代码中，lng和lat分别代表标记的经度和纬度。你可以根据自己的需求修改这些值。
在模板中添加一个用于显示地图的容器：
`html

这样，当Vue组件被渲染时，地图和标记就会被初始化并显示出来。当你点击标记时，可以在标记的点击事件处理函数中执行你想要的操作，比如显示信息窗口等。

总结一下，要在Vue中使用高德地图并点击标记，你需要引入高德地图的JavaScript API，并在Vue组件的mounted生命周期钩子函数中初始化地图和添加标记。通过监听标记的点击事件，你可以实现点击标记时的操作。希望这个解答对你有帮助！

上一篇

vue双击事件屏蔽单击事件

下一篇

vue前后端数据交互能用ajax吗