将自定义文本添加到路由方向航点标记答案

【问题标题】：Add custom text to routing direction waypoints marker将自定义文本添加到路由方向航点标记
【发布时间】：2014-04-21 17:01:32
【问题描述】：

我想在这里地图的航点标记中添加文本，就像在他们的site 上一样，以便能够对航点进行编号。如果路线有超过 20 个航点，就会变得相当混乱。

这是我当前的路由代码：

function drivingDirections(arr) {
    var waypointArray = new nokia.maps.routing.WaypointParameterList();

    for (var i = 0; i < arr.length; i++) {
        waypointArray.addCoordinate(new nokia.maps.geo.Coordinate(arr[i][0], arr[i][2]));
    }

    var modes = [{
        type: "shortest",
        transportModes: ["car"],
        options: "avoidTollroad",
        trafficMode: "default"
    }];

    var onRouteCalculated = function (observedRouter, key, value) {
        if (value === "finished") {
            var routes = observedRouter.getRoutes();

            // Create the default map representation of a route
            var mapRoute = new nokia.maps.routing.component.RouteResultSet(routes[0]).container;
            map.objects.add(mapRoute);

            // Zoom to the bounding box of the route
            map.zoomTo(mapRoute.getBoundingBox(), false, "default");
        } else if (value === "failed") {
            alert("Sikertelen útvonaltervezés");
        }
    };

    router.addObserver("state", onRouteCalculated);
    router.calculateRoute(waypointArray, modes);
}

根据文档，这是向标记添加文本的方法：

    var marker = new nokia.maps.map.StandardMarker([52.51, 13.4], {
        text: "Hi!"
    });

如何在路由请求中实现这一点？

现在它添加了默认的航点标记，如下所示：

【问题讨论】：

标签： javascript maps markers here-api

【解决方案1】：

如果你想改变路线的显示，你不能使用默认的RouteResultSet，你必须实现你自己的逻辑来显示路线Polyline和航点。当您收到路由时，只需创建一个 Container 并在创建对象时将它们扔到其中。如果需要，您可以更改 StandardMarkers 的文本和颜色或将其替换为自定义 Markers。像这样的：

var legContainer = new nokia.maps.map.Container();
var onRouteCalculated = function (observedRouter, key, value) {
  if (value == "finished") {
    var firstroute = observedRouter.getRoutes()[0];
    // First clear any previous route.
    legContainer.objects.clear();    

    for (var i = 0;  i < firstroute.waypoints.length; i++){
        legContainer.objects.add(new nokia.maps.map.StandardMarker(
          firstroute.waypoints[i].mappedPosition, 
          { text: i  + 1 }
        ));
    }

    for (var i = 0;  i < firstroute.legs.length; i++){

      var strokeColor = "#22CA";

      if (i % 2 == 0){          
          strokeColor = "#CACA00"
      }

      legContainer.objects.add(new nokia.maps.map.Polyline(
          firstroute.legs[i].points,
          { 
            pen: {
              strokeColor: strokeColor, 
              lineWidth: 5
            }
          }
        ));
      } 
     map.objects.add(legContainer);
     map.zoomTo(legContainer.getBoundingBox(), true);
   } else if (value == "failed") {
      // Something has gone horribly wrong  e.g. route too long.
      alert("The routing request failed.");
  }
}

您可以看到自定义路线渲染的示例here - 它只是将路线折线设置为不同的颜色，但您应该明白这一点。

假设legContainer 被赋予正确的范围，您可以使用legContainer.objects.clear(); 清空之前呈现的任何MapObjects。

【讨论】：