如何使用 HERE Maps javascript 显示多条地图路线，每条路线都以不同的颜色？

Question

我是这里的新手。我一直在尝试在同一张地图上显示不同的路线（坐标和颜色是从数据库中读取的）。路线按预期显示，但仅显示在颜色值数组的最后一个颜色值中。如何让它用不同的颜色显示不同的路线？

这是我的代码（省略了此代码之前使用的变量的初始化，仅贴出与地图相关的代码）：

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

     pixelRatio: window.devicePixelRatio || 1

    });

    //map.setBaseLayer(defaultLayers.raster.satellite.map);
    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);
    
    for (var n = 0; n < sourceLatSplit.length; n++){
        var routingParameters = {
          'routingMode': 'fast',
          'transportMode': 'truck',
          'origin': sourceLatSplit[n].toString() + ',' + sourceLongSplit[n].toString(),
          'destination': destinationLatSplit[n].toString() + ',' + destinationLongSplit[n].toString(),
          'return': 'polyline'
        };
        routingParametersArray.push(routingParameters);
    }

    var onResult = function(result) {
        for (var r = 0; r < sourceLatSplit.length; r++){
            if (result.routes.length) {
        result.routes[0].sections.forEach((section) => {
            let linestring = H.geo.LineString.fromFlexiblePolyline(section.polyline);
            console.log(colorValuesSplit[r]);
            let routeLine = new H.map.Polyline(linestring, {
              style: { strokeColor: colorValuesSplit[r].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);
        console.log(group);

        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>'// + sourceLocationSplit[0] + 
                         +'</b></div><div><b>Latitude: </b>' + startMarker.getGeometry().lat + '</div><div><b>Longitude: </b>' + startMarker.getGeometry().lng + '</div>');

        addMarkerToGroup(group, endMarker,
            '<div><b>'// + destinationLocationSplit[0] + 
                         +'</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 (var i = 0; i < routingParametersArray.length; i++){
        
    
router.calculateRoute(routingParametersArray[i], onResult,
  function(error) {
    alert(error.message);
  });
    }
}

Answer 1

这与 HERE Maps Javascript 问题无关。这与回调中的代码组织不正确有关

onResult

您需要从回调

for (var r = 0; r < sourceLatSplit.length; r++){

中删除循环

onResult

，因为回调

onResult

开始针对每个计算出的路线运行，这就足够了。

那么你的代码将如下所示：

    let r = 0;
    
        var onResult = function(result) {
                //for (var r = 0; r < sourceLatSplit.length; r++){
                    if (result.routes.length) {
                result.routes[0].sections.forEach((section) => {
                    let linestring = H.geo.LineString.fromFlexiblePolyline(section.polyline);
                    console.log(colorValuesSplit[r]);
                    let routeLine = new H.map.Polyline(linestring, {
                      style: { strokeColor: colorValuesSplit[r].toLowerCase(), lineWidth: 6 }
                    });
r++;

但请记住，如果路线请求的某些响应会延迟，那么相同的多段线您将始终获得不同的颜色（当您一次又一次运行完整的代码时），即颜色的顺序将与顺序不匹配定义的路线。

要解析它，您需要将绑定应用到函数 onResult，例如：

router.calculateRoute(routingParametersArray[i], onResult.bind({r: i})

然后在函数 onResult 中您可以获得此 r：

this.r

喜欢：

var onResult = function(result) {
        //for (var r = 0; r < sourceLatSplit.length; r++){
            if (result.routes.length) {
        result.routes[0].sections.forEach((section) => {
            let linestring = H.geo.LineString.fromFlexiblePolyline(section.polyline);
            console.log(colorValuesSplit[this.r]);
            let routeLine = new H.map.Polyline(linestring, {
              style: { strokeColor: colorValuesSplit[this.r].toLowerCase(), lineWidth: 6 }
            });