高德地图自定义 Marker：点击 悬停 显示信息框InfoWindow实战（Vue + AMap 2.0）
一、前言
在前端地图应用中，点击或悬停标记点（Marker）并弹出信息框（InfoWindow）是很常见的交互需求。本文将结合 Vue 与高德地图（AMap），讲解如何给自定义 Marker 添加点击与悬停事件，并显示定制的提示框。适用于想要增强地图应用交互体验的读者。
📌 如果你正在开发一个车辆监控、商户分布、物流调度等地图应用，这篇文章会很有参考价值。
二、环境准备
在开始编码之前，请确保你具备以下条件：
-
Vue3（Composition API）开发环境；
-
已成功引入 高德地图 JS API；
-
拥有高德地图的 API Key；
-
有一组需要展示的标记点数据（含经纬度和展示内容）。
📌如果你还不清楚 Key 申请 和 地图初始化 的过程，可以先参考我的另一篇文章 👉 高德地图 Key 申请与初始化。
三、核心思路
整体实现流程拆解如下：
-
在 Vue 组件中准备地图容器
mapRef； -
初始化地图对象
AMap.Map； -
创建
infoWindow用于展示详情； -
遍历标记点，生成自定义
Marker； -
给 Marker 绑定 点击 / 悬停事件；
-
动态设置 InfoWindow 的内容并展示；
-
鼠标移出关闭 InfoWindow。
-
若用户没有手动拖动或缩放地图，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; // 设备唯一 IDstatus: 'online' | 'online_driving' | 'offline' | 'online_parking'; // 车辆状态：在线、行驶中、离线、停车中licensePlate: string; // 车牌号ts: string | numb