vue 与高德地图结合

Vue 可以很方便地与高德地图结合，通过使用高德地图提供的 API，可以在 Vue 项目中实现地图的显示、标记、搜索、导航等功能。

以下是一个简单的例子，展示如何在 Vue 中使用高德地图：

1. 在 index.html 中引入高德地图 API：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=your-key"></script>

其中 `your-key` 替换为你的高德地图开发者 API Key。

2. 在 Vue 组件中使用高德地图：

<template>
  <div id="map"></div>
</template>

<script>
export default {
  mounted() {
    // 创建地图实例
    const map = new AMap.Map('map', {
      center: [116.397428, 39.90923], // 中心点坐标
      zoom: 13 // 缩放级别
    });
    
    // 添加标记
    const marker = new AMap.Marker({
      position: [116.397428, 39.90923], // 标记位置
      map: map // 所属地图实例
    });
  }
}
</script>

在这个例子中，我们在 Vue 组件的 `mounted` 钩子函数中创建了一个地图实例，并在其中添加了一个标记。可以根据实际需求，使用不同的 API 实现更多的功能。