前端地图开发：标记点（Marker）的添加、删除、拖拽与事件绑定

地图覆盖物：标记点（Marker）

1. 学习目标

在开始敲键盘之前，需要明确本节课的核心目标。

1. 掌握 Marker 的生命周期：从创建 new Marker() 到销毁 remove()，清楚每个阶段该干嘛，避免内存泄漏。
2. 精通自定义图标：学会用 icon 属性加载自定义图片，甚至用 content 搞 HTML 覆盖物。
3. 事件绑定与交互：click、drag、mouseover 等事件的监听方法，以及事件对象中的坐标系问题。
4. 性能优化意识：当页面上有大量 Marker 时，如何处理聚合、分页或分层加载。
5. 坐标系陷阱：WGS84、GCJ-02、BD09 的区别，避免标记点位置偏移。

2. 核心原理与流程

Marker 的本质是 DOM 元素或者 Canvas 绘制的内容，叠加在地图容器之上。一个 Marker 从代码到屏幕显示的全过程如下：

1. 初始化地图实例 map。
2. 创建 Marker 实例 new Marker。
3. 配置属性（设置 position 经纬度、icon 或 content）。
4. 绑定事件 addEventListener。
5. 将 Marker 添加到地图 map.add。
6. 地图渲染引擎计算像素坐标，创建 DOM 节点或 Canvas 绘制。
7. 插入地图容器 DOM 树。
8. 用户交互触发事件，事件回调处理逻辑，更新状态或移除 Marker。

原理深度解析：

1. 坐标转换：SDK 内部会立刻把经纬度（lnglat）通过墨卡托投影转换成屏幕像素坐标。频繁改经纬度会消耗性能。
2. DOM 管理：大部分 Web 地图 SDK 的 Marker 其实是绝对定位的 div。自定义 content 为复杂 HTML 时需控制数量，防止重绘卡顿。
3. 事件代理：部分 SDK 使用事件代理机制，需使用 SDK 提供的 on 或 addEventListener。

3. 实战代码详解

3.1 添加与自定义图标

// 1. 初始化地图
const map = new AMap.Map('container', {
    zoom: 11,
    center: [116.397428, 39.90923]
});

// 2. 创建 Marker
const marker = new AMap.Marker({
    : [, ], 
    : , 
    : , 
    : , 
    : map 
});