Google Maps Directions使用1-2-3而不是A-B-C [英] Google Maps Directions using 1-2-3 instead of A-B-C

问题描述

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

问题是，它向我展示了整个路径上的几个工作站，并将它们标记为ABCD。 .Z，但我需要将其更改为1-2-3-4 - .. 99，

这是我的代码;

  directionsService.route（{
 origin：$（＃input-directions-start-point）.val（），
 destination ：$（＃input-directions-end-point）.val（），
 waypoints：waypts，//其他持续时间点
 optimizeWaypoints：true，
 travelMode：google.maps。 TravelMode.DRIVING 
}，函数（响应，状态）{
 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）; 
} 
}）; 
  

这是屏幕截图;

在此先感谢

解决方案

google.maps.DirectionsRendererOptions 具有属性 suppressMarkers 当您设置为时， true ，只会呈现路径而不是标记。然后，您可以使用例如 google.maps.Marker 来自己渲染标记，其中 label 属性，使用它可以指定标记内的标签，例如可以是一个数字（你也可以通过扩展 google.maps来创建自己的定制标记.OverlayView 类，或者使用 RichMarker库）。标记在路线上的位置可以从响应 directionsService 的对象进行解析。

详情请参阅文档。

工作示例：

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}]，//其他持续时间点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.e rror_direction_calculate +：+ status，BootstrapDialog.TYPE_DANGER）; }}）;}

< script type =text / javascriptsrc =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 =mapstyle =height：400px; width：500px;>< / div>< / body>

I'm using the Google Maps API on Google Maps.

The thing is that, It shows me several stations throughout the path, labeling them as A-B-C-D...Z, but I need to change it as 1-2-3-4-..99,

Here is my code;

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

Here is the Screen Shot;

Thanks in Advance

解决方案

google.maps.DirectionsRendererOptions has property suppressMarkers which when you set to true, will only render the path but not markers.

You can then render the markers yourself using for example google.maps.Marker, which has label attribute using which you can specify the label inside the marker, which can be for example a number (You can also create your own very custom marker by extending google.maps.OverlayView class, or use RichMarker library). The position of the markers on route can be parsed from response object of directionsService.

More in docs.

Working example:

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>

这篇关于Google Maps Directions使用1-2-3而不是A-B-C的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！