如何使用HERE Maps JavaScript显示不同颜色的多条地图路线

问题根源 #

你遇到的问题是异步回调的变量作用域冲突导致的：

• 用var声明的循环变量r和i没有块级作用域，当异步的onResult回调执行时，循环已经结束，变量会保留最后一次循环的索引值，所有路线都读取数组最后一个颜色。
• 原代码在onResult内部额外循环了sourceLatSplit.length次，导致单个路由结果被重复处理多次，进一步加剧了颜色匹配错误。

修复步骤 #

1. 用let替代var声明循环变量：let会创建块级作用域，每次循环生成独立的变量实例，确保回调能捕获当前循环的正确索引。
2. 绑定路由请求与对应颜色：通过闭包创建专属回调函数，将当前路线的颜色直接传递给回调，避免索引匹配错误。
3. 移除onResult内部的多余循环：每个路由请求的回调只处理当前请求的路线，避免重复创建。

修改后的完整代码 #

var map = new H.Map(document.getElementById('mapContainer'),
defaultLayers.vector.normal.map,{
center: {lat: 40, lng: 19},
 zoom: 7,
 pixelRatio: window.devicePixelRatio || 1
});

window.addEventListener('resize', () => map.getViewPort().resize());
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);

// 构建路由参数数组
var routingParametersArray = [];
for (let n = 0; n < sourceLatSplit.length; n++){ // 改用let创建块级作用域
    var routingParameters = {
      'routingMode': 'fast',
      'transportMode': 'truck',
      'origin': `${sourceLatSplit[n]},${sourceLongSplit[n]}`,
      'destination': `${destinationLatSplit[n]},${destinationLongSplit[n]}`,
      'return': 'polyline'
    };
    routingParametersArray.push(routingParameters);
}

// 生成绑定目标颜色的回调函数
var createOnResult = function(targetColor) {
    return function(result) {
        if (result.routes.length) {
            result.routes[0].sections.forEach((section) => {
                let linestring = H.geo.LineString.fromFlexiblePolyline(section.polyline);
                let routeLine = new H.map.Polyline(linestring, {
                  style: { strokeColor: targetColor.toLowerCase(), lineWidth: 6 }
                });

                let startMarker = new H.map.Marker(section.departure.place.location);
                let endMarker = new H.map.Marker(section.arrival.place.location);
                var group = new H.map.Group();
                group.addObject(routeLine);

                group.addEventListener('tap', function (evt) {
                    var bubble = new H.ui.InfoBubble(evt.target.getGeometry(), {
                        content: evt.target.getData()
                    });
                    ui.addBubble(bubble);
                }, false);

                addMarkerToGroup(group, startMarker,
                    `<div><b></b></div><div><b>Latitude: </b>${startMarker.getGeometry().lat}</div><div><b>Longitude: </b>${startMarker.getGeometry().lng}</div>`);

                addMarkerToGroup(group, endMarker,
                    `<div><b></b></div><div><b>Latitude: </b>${endMarker.getGeometry().lat}</div><div><b>Longitude: </b>${endMarker.getGeometry().lng}</div>`);
                
                map.addObjects([group]);
                // 可选：若要适配所有路线范围，建议在所有路线加载完成后统一设置，避免频繁调整地图视角
                // map.getViewModel().setLookAtData({bounds: routeLine.getBoundingBox()});
            });
        }
    };
};

var router = platform.getRoutingService(null, 8);

// 循环发起路由请求，绑定对应颜色
for (let i = 0; i < routingParametersArray.length; i++){ // 改用let创建块级作用域
    const targetColor = colorValuesSplit[i];
    router.calculateRoute(
        routingParametersArray[i], 
        createOnResult(targetColor), // 传入绑定当前颜色的回调
        function(error) {
            alert(error.message);
        }
    );
}

关键修改说明 #

• 块级作用域变量：for循环中用let声明变量，确保每个循环的索引和颜色不会被后续循环覆盖。
• 闭包绑定颜色：createOnResult函数为每个路由请求生成专属回调，直接绑定当前路线的颜色，避免依赖循环变量。
• 简化逻辑：移除onResult内部的多余循环，每个回调只处理对应请求的路线，避免重复创建元素。

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