高德地图自定义 Marker：点击 & 悬停 显示信息框InfoWindow实战（Vue + AMap 2.0）

一、前言

在前端地图应用中，点击或悬停标记点（Marker）并弹出信息框（InfoWindow）是很常见的交互需求。本文将结合 Vue 与高德地图（AMap），讲解如何给自定义 Marker 添加点击与悬停事件，并显示定制的提示框。适用于想要增强地图应用交互体验的读者。

📌 如果你正在开发一个车辆监控、商户分布、物流调度等地图应用，这篇文章会很有参考价值。

二、环境准备

在开始编码之前，请确保你具备以下条件：

• Vue3（Composition API）开发环境；

• 已成功引入 高德地图 JS API；

• 拥有高德地图的 API Key；

• 有一组需要展示的标记点数据（含经纬度和展示内容）。

📌如果你还不清楚 Key 申请 和 地图初始化 的过程，可以先参考我的另一篇文章 👉 高德地图 Key 申请与初始化。

三、核心思路

整体实现流程拆解如下：

1. 在 Vue 组件中准备地图容器 mapRef；

2. 初始化地图对象 AMap.Map；

3. 创建 infoWindow 用于展示详情；

4. 遍历标记点，生成自定义 Marker；

5. 给 Marker 绑定 点击 / 悬停事件；

6. 动态设置 InfoWindow 的内容并展示；

7. 鼠标移出关闭 InfoWindow。

8. 若用户没有手动拖动或缩放地图，Marker 渲染后自动调整视野（FitBounds / FitView）。

四、示例代码解析

下面给出一个基于 Vue3 + TypeScript 的完整示例：

1. 声明与准备工作

定义组件 props 接收外部参数，比如 zoom、markers 数据、地图高度等。例：

const props = defineProps<{
  zoom?: number;
  markers?: GpsDevice[];
  height?: number;
}>();

定义地图相关变量，包括地图实例 map、存储 Marker 的数组 markerLayer、信息窗口 infoWindow、标记用户是否手动干预地图的 userInteracted 。

const mapRef = ref<HTMLElement | null>(null)
let map: AMap.Map | null = null
let markerLayer: AMap.Marker[] = []
let infoWindow: AMap.InfoWindow | null = null
let userInteracted = false // ✅ 是否用户手动交互过地图
 

定义一个 GpsDevice 接口表示每个设备的属性。

interface GpsDevice {
  id: string; // 设备唯一 ID
  status: 'online' | 'online_driving' | 'offline' | 'online_parking'; 
  // 车辆状态：在线、行驶中、离线、停车中
  licensePlate: string; // 车牌号
  ts: string | numb