Vue3 引入高德地图

### 在 Vue3 中引入和配置高德地图 API

#### 准备工作
为了在 Vue3 项目中成功集成高德地图，需先准备好开发环境。这包括安装 Node.js 和 Git 工具，并选用 pnpm 作为包管理工具来加速依赖项下载并减少磁盘占用量[^1]。

#### 安装 vue-amap 插件
通过 npm 或者其他兼容的包管理器（如上述提到的 pnpm），可以安装 `vue-amap` 这个用于简化 AMap API 使用体验的插件。完成安装之后，在项目的入口文件处导入此插件并调用其初始化方法：

// main.ts or equivalent entry file of your project
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 引入vue-amap
import VueAMap from '@vuemap/vue-amap-taro'; // 注意这里可能需要根据最新文档调整路径
app.use(VueAMap);

VueAMap.initAMapApiLoader({
    key: '<Your HighDever Key Here>', // 替换成自己的key
    plugin: [
        'AMap.Autocomplete',
        'AMap.PlaceSearch',
        'AMap.Scale',
        'AMap.OverView',
        'AMap.ToolBar',
        'AMap.MapType'
    ],
});

这段代码实现了对 `vue-amap` 的注册以及必要的参数设置，比如个人申请得到的地图服务密钥(key)，还有想要加载的功能模块列表(plugin)[^2]。

#### 自定义样式隐藏默认Logo
如果希望自定义页面布局而不显示高德地图自带的品牌标识，则可以在组件内部添加特定的选择器规则覆盖原有样式:

<template>
  <!-- Your map container -->
</template>

<script setup lang="ts">
// Map initialization logic here...
</script>

<style scoped>
/* 隐藏掉高德logo */
:deep(.amap-logo),
:deep(.amap-copyright) {
  display: none;
}
</style>

以上操作能够有效地移除地图角落中的版权信息与品牌标志，使界面更加简洁美观[^3]。