Question

我在Google地图上使用Google Maps API。

问题是，它向我显示了整个路径中的几个站点，将它们标记为A-B-C-D ... Z，但我需要将其更改为1-2-3-4 - .. 99，

这是我的代码;

directionsService.route({
    origin: $( "#input-directions-start-point" ).val(),
    destination: $( "#input-directions-end-point" ).val(),
    waypoints: waypts, //other duration points
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      console.log(response);
    } else {
      vts.alertDialog( window.localization.error,
        window.localization.error_direction_calculate + ": " + status,
        BootstrapDialog.TYPE_DANGER);
    }
  });

这是屏幕截图;

先谢谢

Answer 1

google.maps.DirectionsRendererOptions具有属性suppressMarkers，当您设置为true时，只会渲染路径而不是标记。

然后您可以使用例如google.maps.Marker自己渲染标记，label具有google.maps.OverlayView属性，您可以使用该属性指定标记内的标签，例如数字（您也可以创建）通过扩展response类或使用RichMarker library）来创建自己的自定义标记。路线上标记的位置可以从directionsService的{{1}}对象进行解析。

更多docs。

工作示例：

function init(){
    directionsService = new google.maps.DirectionsService();

    var pos = new google.maps.LatLng(41.218624, -73.748358);
    var myOptions = {
        zoom: 15,
        center: pos,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map'), myOptions);
    directionsDisplay = new google.maps.DirectionsRenderer({map: map, suppressMarkers: true});

    directionsService.route({
        origin: "New York",
        destination: "Chicago",
        waypoints: [{location:"Philadelphia"}, {location:"Boston"}], //other duration points
        optimizeWaypoints: true,
        travelMode: google.maps.TravelMode.DRIVING
    }, function(response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
			var my_route = response.routes[0];
            for (var i = 0; i < my_route.legs.length; i++) {
                var marker = new google.maps.Marker({
                    position: my_route.legs[i].start_location,
                    label: ""+(i+1),
                    map: map
                });
            }
            var marker = new google.maps.Marker({
                position: my_route.legs[i-1].end_location,
                label: ""+(i+1),
                map: map
            });
        } else {
            vts.alertDialog( window.localization.error,
                window.localization.error_direction_calculate + ": " + status,
                BootstrapDialog.TYPE_DANGER);
        }
    });

}

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("maps", "3",{other_params:"sensor=false"});
</script>
<body style="margin:0px; padding:0px;" onload="init()">
	 <div id="map" style="height:400px; width:500px;"></div>
</body>

使用1-2-3而不是A-B-C的Google Maps Directions

1 个答案: