Vue3使用高德地图，详解、常见问题与最佳解决方案

以下是关于在 Vue3 中使用高德地图的详细步骤、常见问题及最佳解决方案的综合指南：

---

一、Vue3 集成高德地图的详细步骤

1. 注册高德开发者并获取 Key

• 前往高德开放平台注册账号，创建应用并申请 Web 端（JS API）的 Key。
• 注意：2021年12月后申请的 Key 需配合安全密钥（securityJsCode）使用。

2. 安装依赖

npm install @amap/amap-jsapi-loader --save

3. 初始化地图组件

• 在 Vue 组件中引入 AMapLoader，并在 onMounted 钩子中初始化地图：

  <template>
    <div id="container" style="width: 100%; height: 100vh"></div>
  </template>
  
  <script setup>
  import { onMounted } from 'vue';
  import AMapLoader from '@amap/amap-jsapi-loader';
  
  let map = null;
  onMounted(() => {
    window._AMapSecurityConfig = {
      securityJsCode: '你的安全密钥', // 必填
    };
    AMapLoader.load({
      key: '你的Key',
      version: '2.0',
      plugins: ['AMap.Scale', 'AMap.MarkerCluster'] // 按需加载插件
    }).then((AMap) => {
      map = new AMap.Map('container', {
        viewMode: '3D',
        zoom: 11,
        center: [116.397428, 39.90923] // 初始中心点
      });
    });
  });
  </script>
  

4. 添加覆盖物（标记、信息窗口）

• 标记（Marker）：

  const marker = new AMap.Marker