Javascript 向路由方向航路点标记添加自定义文本

我想在地图中的航路点标记上添加文字，就像在地图上一样，以便能够对航路点进行编号。如果路线有超过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);
}

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

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

---

如果要更改路线的显示，您不能使用默认的

RouteResultSet

，您必须实现自己的逻辑来显示路线

多段线和航路点。当您收到路由时，只需创建一个
容器
，并在创建对象时将其放入其中。如果需要，您可以更改
标准标记的文本和颜色，或者用自定义
标记替换它们。大概是这样的：

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.");
  }
}

var legContainer=new nokia.maps.map.Container（）；
var onRouteCalculated=函数（ObservedOuter、键、值）{
如果（值=“已完成”）{
var firstroute=observedRouter.getRoutes（）[0]；
//首先清除之前的任何路线。
legContainer.objects.clear（）；
对于（变量i=0；i

您可以看到一个自定义管线渲染的示例—它只是将管线多段线设置为不同的颜色，但您应该了解这一点

假设
legContainer
具有正确的作用域，则可以使用
legContainer.objects.clear（）
清空以前渲染的任何
MapObjects

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.");
  }
}