vue3接入amap

Vue3中接入AMAP（高德地图API），首先需要安装相关的依赖库，如`@vue-amap/core`和`@vue-amap/lazy-load`。以下是简单的步骤：

1. **安装依赖**：
在项目中通过npm或yarn安装所需模块：

   npm install @vue-amap/core @vue-amap/lazy-load

2. **配置环境变量**：
需要在项目运行环境中设置AMAP的key（在高德官网申请），通常会存储在`.env`文件或其他合适的环境配置文件中。

3. **注册组件**：
在Vue组件中导入并注册AMap组件，比如`AMapMap`：

   import { AMapMap } from '@vue-amap/core';
   import '@vue-amap/lazy-load';

   export default {
     components: {
       AMapMap,
     },
   };

4. **使用地图组件**：
在模板中创建一个AMapMap元素，并设置初始化参数：

   <template>
     <div id="map" style="height: 500px;"></div>
   </template>

   <script>
   export default {
     mounted() {
       // 初始化地图，传入你的AMAP key
       this.$refs.map.init({
         center: [116.404, 39.915], // 北京坐标
         zoom: 11,
         plugins: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.MapType'] // 可选插件
       });
     }
   };
   </script>

5. **样式调整**：
如果需要自定义地图样式，可以使用CSS覆盖默认样式。