Vue-amap 使用

Vue-amap 是一个基于 Vue.js 的高德地图组件，它提供了一系列的组件和指令，方便开发者在 Vue.js 项目中使用高德地图的功能。

使用 Vue-amap 需要先安装和引入相关的依赖包。可以通过 npm 或 yarn 进行安装，例如：

npm install vue-amap

安装完成后，在需要使用的组件中引入 Vue-amap：

import VueAMap from 'vue-amap';

Vue.use(VueAMap);

接下来，需要在项目中配置高德地图的密钥，可以在高德开放平台申请获取。在 Vue-amap 中，可以通过 `VueAMap.initAMapApiLoader` 方法进行配置：

VueAMap.initAMapApiLoader({
  key: 'your amap key',
  plugin: ['AMap.Geolocation']
});

在配置完成后，就可以在 Vue 组件中使用 Vue-amap 提供的地图组件和指令了。例如，可以在模板中使用 `<amap-map>` 组件来显示地图：

<template>
  <div>
    <amap-map :zoom="13" :center="center">
      <amap-marker :position="center"></amap-marker>
    </amap-map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      center: [116.397428, 39.90923] // 地图中心点坐标
    };
  }
};
</script>

除了地图组件外，Vue-amap 还提供了其他一些常用的组件和指令，如标记点、信息窗体、路径规划等，可以根据具体需求进行使用。