Google 地图路线使用 1-2-3 而不是 A-B-C

问题描述 投票：0回答：2

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

这是屏幕截图；

提前致谢

javascript google-maps google-maps-api-3
2个回答
6
投票

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

然后，您可以使用例如 

google.maps.Marker
自己渲染标记，它具有 
label
属性，您可以使用该属性指定标记内的标签，例如可以是数字（您也可以通过以下方式创建自己的非常自定义的标记）扩展 
google.maps.OverlayView
类，或使用 RichMarker 库）。路线上标记的位置可以从 
response
的 
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"}], //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>

0
投票

嗨，不完全相关，但是你是如何改变指针的颜色的？该解决方案非常有帮助，谢谢大家：D

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.