高德地图 API 配置指南：地图初始化与标点弹窗开发全流程

一、引言

行业背景与技术价值

1.地图服务应用场景

• 地图功能在web开发中或移动端中开发中的普遍性（如：电商配送、本地生活服务、社交平台）。
• 举例：美团外卖提供骑手的轨迹追踪、企业官网的线下门店展示、小红书的地点搜索。

2.高德地图API的优势

• 强调其免费额度高、文档齐全、本地化服务精准的特点（如：支持国内高精度地理编码、POI 数据丰富）。
• 对比其他地图服务（如百度地图、腾讯地图），突出高德在开发者友好性和场景适配性上的优势（如：适合中小型项目快速落地）。

痛点与本文目标

1.新手开发者常见障碍

• 痛点
  • 对地图API初始化流程不熟悉（如：API Key申请、脚本引入）
  • 标点与弹窗交互逻辑复杂（如：点击事件绑定、弹窗层级管理）。
  • 缺乏从 “零” 到 “完整功能” 的全流程案例参考。

2.本本解决的核心问题

• 明确承诺：从零开始配置高德地图 API ，包括账号注册、环境搭建、地图初始化、标点添加及弹窗交互。
• 目标成果：让读者掌握动态地图展示 + 交互式标点弹窗的核心开发技能，可直接复用于业务场景。

二、准备工作

• 注册高德开放平台账号
• 创建应用并获取 API Key
• 了解开发所需的环境和工具

https://zhuanlan.zhihu.com/p/675181913（流程详解）

三、环境搭建

• 引入高德地图 API 脚本（基于Vue3的开发项目-库：@amap/amap-jsapi-loader）
• 创建 HTML 文件并设置基本结构（个人可配置）
• 测试地图是否正常显示

四、地图初始化

• 初始化地图容器

DOM结构中添加地图容器并设置唯一id

<div id="container" style="width: 100%"></div>

<script setup>结构中引入

import { onMounted, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'

初始化配置AMapLoader