如何阻止Here Maps计算路线时自动重定位与缩放地图？

问题背景 #

开发类似Uber/Cabify的实时路线共享应用，技术栈为ReactJS+Python，基于Here Maps实现功能。当前需求是车辆坐标变化时调用Routing API重算路线以获取ETA，但每次重算后地图会自动居中调整位置，仅需更新路线点即可，尝试保存恢复视图状态、固定边界均无效。

核心原因 #

Here Maps默认会在添加新地图对象（折线、标记等）时自动适配视图边界，导致视角被强制重置。

修复方案 #

步骤1：操作前保存视图状态并关闭自动适配 #

在移除旧对象、添加新对象前，先保存当前的缩放级别和中心坐标，同时关闭地图的自动视图调整功能，避免新对象触发视角变化。

步骤2：操作完成后恢复视图状态 #

所有新地图对象添加完成后，手动设置回之前保存的视图参数。

修改后的完整代码 #

// 保存当前视图状态（必须在移除/添加对象前执行）
const originalZoom = map.getZoom();
const originalCenter = map.getCenter();
// 临时关闭地图自动视图调整，防止添加对象时触发视角变化
map.getViewModel().setAutoAdjustMapView(false);

const sections = response.routes[0].sections;
for (const section of sections) {
  var horaestimada = segundosAHorasMinutos(section.travelSummary.duration);
  console.log(`Duración del viaje: ${horaestimada}`);
  dispatch(setETA(horaestimada));
}
const lineStrings = [];
sections.forEach((section) => {
    // 转换Flexible Polyline编码字符串为几何对象
    lineStrings.push(H.geo.LineString.fromFlexiblePolyline(section.polyline));
});
const multiLineString = new H.geo.MultiLineString(lineStrings);

// 创建路线折线
const routePolyline = new H.map.Polyline(multiLineString, {
    style: {
        lineWidth: 5
    }
});

// 移除所有旧地图对象
map.removeObjects(map.getObjects());
// 生成乘车人信息HTML
var htmlbody
for (const tripulante of tripulacion) {
  htmlbody = '<p class="body2Text"> <span> '+tripulante.cargo+': </span> ' + tripulante.nombre+ ' - ' + tripulante.documento+'</p>';
}
// 添加新路线折线
map.addObject(routePolyline);
// 添加起点和终点标记
map.addObjects([
    new H.map.Marker(start, {
        icon: getMarkerIcon(estado),
        data: {
          message: '<div class="body2Title" style="width: 300px;"><p>'+nombre+'</p><hr style="margin-top: 0px;"></span>' + htmlbody,
          idmarcador: 'xd',
        }
    }),
    new H.map.Marker(destination, {
        icon: getMarkerIcon(null),
        data: {
          message: '<div class="body2Title" style="width: 300px;"><p> Destino </p><hr style="margin-top: 0px;"></span>',
          idmarcador: 'xd',
        }
    })
]);

// 恢复原始视图状态
map.getViewModel().setLookAtData({
  center: originalCenter,
  zoom: originalZoom
}, true);

// 若后续需要自动适配视图，可重新开启（按需启用）
// map.getViewModel().setAutoAdjustMapView(true);

关键说明 #

• 删除了原代码中无需使用的const bounds = multiLineString.getBoundingBox();，避免误触发视图适配。
• setLookAtData的第二个参数true表示平滑过渡到原始视图，不需要动画可改为false。
• 必须确保视图状态的保存操作在移除旧对象/添加新对象之前执行，否则会获取到错误的视图参数。

内容的提问来源于stack exchange，提问作者Diego GT