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

5.2 事件绑定与拖拽

// 1. 点击事件
marker.on('click', (e) => {
    console.log('点击了标记点', e.lnglat);
    // 注意：e.lnglat 是地理坐标，不是像素坐标
});

// 2. 开启拖拽
marker.setDraggable(true);

// 3. 拖拽事件
marker.on('dragend', (e) => {
    const newPos = e.lnglat;
    console.log('新位置', newPos);
    // 算法思路：拖拽结束后通常需要逆地理编码，更新地址信息
});

5.3 删除与清理

// 1. 单个删除
marker.setMap(null); // 推荐方式，从地图移除但保留实例
// 或者 map.remove(marker);

// 2. 批量删除算法思路
// 步骤 1: 维护一个 markerList 数组
// 步骤 2: 遍历数组调用 setMap(null)
// 步骤 3: 清空数组 markerList = []
// 步骤 4: 强制触发垃圾回收（通常不需要，但海量数据时要注意）

性能优化与坑点总结

海量 Marker 可能导致浏览器卡顿，需注意以下优化：

坑点预警：

1. 内存泄漏：移除 Marker 后，如果事件回调里引用了外部大对象，记得手动解绑事件 off。
2. zIndex 混乱：多个 Marker 重叠时，点击事件可能触发不到下面的。善用 zIndex 属性控制层级。
3. 移动端点击：移动端有 300ms 延迟，如果是高频点击场景，考虑用 touchstart 或者 SDK 提供的特定移动事件。

高频面试题

以下是相关面试题参考：

1. Q: 地图上如何展示十万级的数据点？
   • A: 不能用 Marker。必须用 Canvas 层或者 WebGL 层绘制，或者使用聚合插件 Cluster，只渲染可见区域内的点。
2. Q: Marker 的 position 更新频繁会导致卡顿吗？
   • A: 会。每次更新都会触发坐标投影计算和 DOM 重排。建议节流（throttle）更新频率，或者使用动画接口 moveTo。
3. Q: 如何实现点击 Marker 弹出信息窗口且不闪烁？
   • A: 复用 InfoWindow 实例，不要每次点击都 new。使用 setContent 更新内容，open 方法调整位置。
4. Q: 自定义 Marker 内容超出范围怎么办？
   • A: 设置 overflow: hidden 或者动态计算 anchor 偏移，确保坐标点对准视觉中心。
5. Q: 地图缩放时 Marker 大小如何保持不变？
   • A: 默认就是像素大小不变。如果需要随地图缩放（比如表示实际面积），需用 Polygon 或监听 zoomchange 动态调整 icon 大小。
6. Q: 如何判断一个点是否在某个 Marker 的点击范围内？
   • A: 通常 SDK 内部处理了 hit testing。如果需要自定义，需获取 Marker 的像素边界矩形，判断鼠标像素坐标是否在内。
7. Q: Marker 拖拽后坐标不准是怎么回事？
   • A: 检查坐标系是否一致。拖拽返回的是当前地图实例的坐标系，如果底层数据是 WGS84 而地图是 GCJ-02 就会偏。
8. Q: 如何优化大量 Marker 的初始化速度？
   • A: 分批渲染（RequestAnimationFrame），或者先渲染可见区域，滚动加载剩余部分。
9. Q: setMap(null) 和 remove() 有什么区别？
   • A: setMap(null) 只是从地图移除，实例还在；remove() 通常指从地图容器移除并清理资源。具体看 SDK 文档。
10. Q: 移动端 Marker 点击区域太小怎么办？
    • A: 增大透明点击区域，或者在 CSS 中扩大 icon 的 padding，但视觉上保持原样。

本章总结

核心 API 与注意事项如下：