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

Question

我想在此地图中为航点标记添加文字，就像在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，您必须实施自己的逻辑来显示路线{{1}和航点。当您收到路线时，只需创建一个Polyline并在创建时将对象扔进去。您可以更改Container的文字和颜色，或者根据需要将其替换为自定义StandardMarkers。像这样：

Markers

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

假设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."); } } 的范围正确，您可以使用legContainer清空先前呈现的legContainer.objects.clear();。