引入@vuemap/vue-amap

### 如何在 Vue 项目中引入和配置 @vuemap/vue-amap 地图组件 #### 安装依赖包 为了能够在 Vue 项目中使用 `@vuemap/vue-amap` 组件库，首先需要安装相应的 npm 包。可以通过命令行工具执行如下指令来完成安装： ```bash npm install @vuemain/vue-amap --save ``` 对于 Vue 3.x 版本，则应确保安装的是兼容版本。 #### 引入插件 接着，在项目的入口文件（通常是 main.js 或者类似的全局初始化脚本）里注册此插件： ```javascript import { createApp } from 'vue'; import App from './App.vue'; // 导入 vuemap 插件及其样式资源 import VueAMap from '@vuemap/vue-amap'; import '@vuemap/vue-amap/dist/style.css'; const app = createApp(App); app.use(VueAMap, { key: "您的高德地图 API Key", // 替换成自己申请的key }); app.mount('#app'); ``` 这里需要注意替换 `"您的高德地图 API Key"` 成为自己通过高德开放平台获取的有效密钥[^1]。 #### 创建地图容器 随后，在想要展示地图的具体页面组件内定义好用于承载地图 DOM 的 div 元素，并为其指定固定的宽高尺寸以便正常显示： ```html <template> <div id="container" style="width: 600px;height:400px;"></div> </template> <script setup lang="ts"> import { onMounted } from 'vue'; onMounted(() => { initMap(); }); function initMap() {} </script> ``` 上述模板中的 `<div>` 即作为地图渲染的目标区域；而 `initMap()` 函数将在稍后被用来实现具体的地图实例化逻辑[^3]。 #### 初始化地图对象 最后一步是在之前提到过的 `initMap()` 方法内部编写必要的代码片段以创建并配置 AMap 实例: ```typescript import { ref } from 'vue'; import { LngLatLike } from '@vuemap/vue-amap/types/base'; let map; async function initMap(): Promise<void> { try { await window.AMapLoader.load(); // 加载高德 JSAPI const centerPosition:LngLatLike=[116.397428,39.90923]; // 设置中心点位置 map=new AMap.Map('container',{ zoom:15, center:centerPosition, }); } catch (error) { console.error(error); } } ``` 这段 TypeScript 代码实现了异步加载高德地图 JavaScript API 并设置了默认的地图视口参数，比如缩放级别(zoom level) 和 中心地理坐标(cente