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

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

引言

本文介绍地图开发中基础且易踩坑的标记点（Marker）功能。地图覆盖物是地图交互的核心组件，而 Marker 又是其中关键。不管是外卖小哥的位置，还是共享单车的停放点，本质上都是 Marker。但这玩意儿要是管理不好，内存泄漏会让你怀疑人生。

学习目标

开始前需明确核心目标：

1. 掌握 Marker 的生命周期：从创建 new Marker() 到销毁 remove()，清楚每个阶段该干嘛，别让对象在内存里赖着不走。
2. 精通自定义图标：学会用 icon 属性加载自定义图片，甚至用 content 搞 HTML 覆盖物。
3. 事件绑定与交互：click、drag、mouseover 这些事件怎么监听？事件对象里有哪些坑？
4. 性能优化意识：当页面上有 1000 个 Marker 时，该怎么处理？聚合？分页？
5. 坐标系陷阱：WGS84、GCJ-02、BD09 别搞混了。

思维导图

结构化知识点如下：

• 基础操作：创建 new Marker、添加到地图 setMap、删除 remove、显示隐藏 show/hide
• 样式定制：默认图标 icon、自定义 HTML content、锚点 anchor、缩放级别可见性 zoomLevels
• 交互事件：点击 click、双击 dblclick、拖拽 dragstart/dragend、鼠标悬停 mouseover
• 高级特性：动画效果 setAnimation、标签 Label、弹性图标 ElasticIcon
• 性能优化：海量点聚合 Cluster、分层加载、移除不可见点

核心原理与流程

理解原理有助于应对复杂需求。Marker 的本质是 DOM 元素或者 Canvas 绘制的内容，叠加在地图容器之上。

流程：

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

原理深度解析：

1. 坐标转换：当你设置 position 时，SDK 内部会立刻把经纬度（lnglat）通过墨卡托投影转换成屏幕像素坐标。这一步是性能消耗点之一，所以别在动画帧里频繁改经纬度。
2. DOM 管理：大部分 Web 地图 SDK 的 Marker 其实是绝对定位的 div。如果你自定义 content 是个复杂的 HTML，记得控制数量，否则 DOM 节点太多会重绘卡顿。
3. 事件代理：有些 SDK 为了性能，不会给每个 Marker 都绑原生 DOM 事件，而是用事件代理机制。所以别指望所有原生事件都能用，老老实实用 SDK 提供的 on 或 addEventListener。

实战代码详解

以下为实用代码片段：

5.1 添加与自定义图标

 map =  .(, {
    : ,
    : [, ]
});


 marker =  .({
    : [, ], 
    : , 
    : , 
    : , 
    : map 
});