javascript - 将自定义文本添加到路线方向航点标记

Question

我想将文本添加到此处 map 中的航路点标记，就像在 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!"
    });

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

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

Answer 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。