车辆位置插值更新时，单个Marker的setPosition触发全局setContent致移动端性能问题

这绝对是MarkerWithLabels在高频更新场景下的典型坑——它的内部事件监听逻辑设计导致单个Marker更新位置时，所有关联的Marker都会触发标签重绘，在你这种100ms一次的插值更新场景下，性能损耗会被无限放大。结合你的场景，给你几个针对性的解决方案：

1. 只更新视口内的Marker #

用户根本看不到屏幕外的车辆，高频更新所有Marker纯纯做无用功。你可以在更新位置前先判断Marker是否在地图当前可见范围内：

const mapBounds = map.getBounds();
vehicleMarkers.forEach(marker => {
  const markerPos = marker.getPosition();
  if (mapBounds.contains(markerPos)) {
    marker.setPosition(newInterpolatedPos);
  }
});

这一步能直接砍掉大部分不必要的setPosition调用，自然也能减少setContent的触发次数。

2. 替换MarkerWithLabels为轻量自定义实现 #

MarkerWithLabels的封装性带来了便利，但也牺牲了控制粒度。你可以用地图的OverlayView自己实现“图标+标签”的组合：

• 创建自定义Overlay，在onAdd方法里初始化图标和标签的DOM元素
• 只在位置发生变化或标签内容确实需要更新时，才手动更新DOM的位置或内容，调用setNeedsRedraw()触发重绘
• 这种方式完全由你掌控重绘时机，不会出现全局触发的问题

3. 魔改MarkerWithLabels的事件逻辑 #

如果不想替换组件，可以修改MarkerWithLabels的源码（或者封装一层做兼容）：

• 找到它内部监听的全局事件（大概率是监听了所有Marker的position_changed或者地图的全局事件）
• 把全局监听改成每个Marker实例独立监听自身的position_changed事件，只在自身位置变化时更新自己的标签
• 额外加一层判断：只有当标签内容真的发生变化时，才调用setContent，避免无意义的DOM操作

4. 批量更新+防抖优化 #

把100ms内的所有位置更新请求合并，批量处理：

• 用一个定时器收集需要更新的Marker和对应的新位置
• 每100ms一次性更新所有收集到的Marker，减少事件触发的总次数
• 同时给setContent添加防抖逻辑，确保短时间内重复调用只会执行一次

5. 缓存标签DOM元素 #

如果标签内容不经常变化，预先把每个Marker的标签DOM元素缓存起来：

// 初始化时缓存标签DOM
vehicleMarkers.forEach(marker => {
  marker._cachedLabel = document.createElement('div');
  marker._cachedLabel.textContent = marker.labelText;
});

// 更新时直接复用缓存的DOM
marker.setContent(marker._cachedLabel);

这样能减少频繁创建DOM和布局计算的开销。

内容的提问来源于stack exchange，提问作者Abijeet Patro