地图快速上手

1为什么这种要写在html上

<script type="text/javascript"> window._AMapSecurityConfig = { securityJsCode: "「你申请的安全密钥」", }; </script>

✅ 核心原因：高德地图 JS API 在加载时会立即读取这个全局配置

📌 执行顺序是关键： 你在 HTML 中先定义 window._AMapSecurityConfig

然后才加载 <script src="https://webapi.amap.com/maps?v=2.0&key=xxx">

高德地图 SDK 在初始化时，会立刻从 window 上读取 securityJsCode

如果没找到，就会报错："安全密钥未配置" 或 "Invalid JsCode"

🔥 这个过程发生在 SDK 加载的瞬间，比 Vue、React 等框架启动还要早！

2 在线引入的步骤

3 初始化实例

4 添加事件

5 npm全局挂载

6 在Vue中按需引入

7 注意id地图名保持唯一

• ID唯一性 是HTML的基本要求，与是否是Vue组件无关
• 在单页应用中，所有组件共享同一个DOM树
• 重复ID会导致JavaScript无法正确操作DOM元素
  所以即使不是同一个Vue组件，也不能使用相同的容器ID。
• 可以不用ID ，推荐使用Vue的ref机制
• ref方式更符合Vue的编程规范
• 不需要担心ID冲突问题
• 代码更简洁、更安全
  这样修改后，所有地图组件都可以使用相同的ref名称，不会有任何冲突。

8 注意版本不统一 的问题

1. 版本不统一 ：

   • Maker地图 ：使用 "2.0" 版本
   • 3D地图 ：使用 "2.1Beta" 版本
   • 不同版本的高德地图 API 会产生冲突

2. AMapLoader重复加载 ：

   • 每个地图组件都在单独调用 AMapLoader.load()
   • 多次加载会导致全局 AMap 对象被覆盖
   • 后加载的地图会影响先加载的地图

3. 资源竞争 ：

   • 多个地图同时初始化会竞争浏览器资源
   • 3D地图需要更多的 WebGL 资源

9 解决方案： 全局加载地图API（推荐）：

1.在 main.js 中 只加载一次 地图API，然后在所有组件中共享：

2. 统一版本：

如果不想全局加载，至少确保所有组件使用 相同的版本

Chat

。

10 为什么会有这个转变：

1. 理论 vs 实践 ：

   • 理论上：每个组件独立管理依赖是理想状态
   • 实践中：高德地图API的全局特性打破了这个理想

2. 高德地图的特殊性 ：

   • 它是一个 全局API ，加载后会创建全局的 AMap 对象
   • 多次加载会 覆盖 全局对象，导致版本冲突
   • 不同版本的API不能共存于同一页面

3. 问题的发现 ：

   • 当我们尝试在多个组件中同时使用地图时，发现只有一个能正常显示
   • 检查后发现是版本冲突和重复加载导致的问题

11 正确的选择：

场景 推荐方式 原因 单个地图组件 组件级加载 代码清晰，按需加载 多个地图组件 全局加载 避免冲突，性能最优 大型应用 全局加载 统一管理，易于维护