javascript 如何使用谷歌地图 api 显示替代路线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18974512/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display alternative route using google map api
提问by Dhaval Bharadva
I am using google map and i am bit of stuck at one point. i want to display alternative routefor my source and destination point. currently i am using the code which is working perfectly and displaying correct result but the only the problem is that this code displaying only single route for my starting and destination path.
我正在使用谷歌地图，但我有一点被卡住了。我想显示我的源点和目的地点的替代路线。目前我正在使用运行良好并显示正确结果的代码，但唯一的问题是此代码仅显示我的起始路径和目标路径的单一路线。
Here is my JSFIDDLE WORKING DEMO
这是我的JSFIDDLE 工作演示
Here is sample codewhich i am using in jsfiddle demo link:
这是我在 jsfiddle 演示链接中使用的示例代码：
HTML CODE:
HTML代码：
<h1>Calculate your route</h1>
<form id="calculate-route" name="calculate-route" action="#" method="get">
<label for="from">From:</label>
<input type="text" id="from" name="from" required="required" placeholder="An address" size="30" />
<a id="from-link" href="#">Get my position</a>
<br />
<label for="to">To:</label>
<input type="text" id="to" name="to" required="required" placeholder="Another address" size="30" />
<a id="to-link" href="#">Get my position</a>
<br />
<input type="submit" />
<input type="reset" />
</form>
JS CODE:
JS代码：
<script>
function calculateRoute(from, to) {
// Center initialized to Naples, Italy
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(40.84, 14.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Draw the map
var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
var directionsService = new google.maps.DirectionsService();
var directionsRequest = {
origin: from,
destination: to,
provideRouteAlternatives: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
};
directionsService.route(
directionsRequest,
function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
new google.maps.DirectionsRenderer({
map: mapObject,
directions: response
});
}
else
$("#error").append("Unable to retrieve your route<br />");
}
);
}
$(document).ready(function() {
// If the browser supports the Geolocation API
if (typeof navigator.geolocation == "undefined") {
$("#error").text("Your browser doesn't support the Geolocation API");
return;
}
$("#from-link, #to-link").click(function(event) {
event.preventDefault();
var addressId = this.id.substring(0, this.id.indexOf("-"));
navigator.geolocation.getCurrentPosition(function(position) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"location": new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
$("#" + addressId).val(results[0].formatted_address);
else
$("#error").append("Unable to retrieve your address<br />");
});
},
function(positionError){
$("#error").append("Error: " + positionError.message + "<br />");
},
{
enableHighAccuracy: true,
timeout: 10 * 1000 // 10 seconds
});
});
$("#calculate-route").submit(function(event) {
event.preventDefault();
calculateRoute($("#from").val(), $("#to").val());
});
});
</script>
you can see in the demo when you enter starting point and destination point it will give you single route accordingly but i need to display alternative routeas well in the map.
您可以在演示中看到，当您输入起点和目的地时，它会相应地为您提供单一路线，但我还需要在地图中显示替代路线。
Is there any way we can choose and display a route between the given options according to the 'distance' or the 'duration in traffic'?
有什么方法可以根据“距离”或“交通持续时间”在给定选项之间选择和显示路线？
Thanks in advance for your help and much appreciated
在此先感谢您的帮助，非常感谢
回答by astupidname
What you need to do is check how many routes are returned by the directionsService.route function call, within the callback function which receives the response object response.routes will be an array, so loop through it and use the loop counter to set the routeIndex for the DirectionsRenderer to use. Of course this resulting output is not at all in my opinion desirable, as very often segments of alternative routes will overlap so it won't always be visually obvious to a user whats going on with the other extra lines. As well as if you actually display the text directions, will need different DOM element for display of each set of directions, and then it's confusing too which set is for what. I would rather advise showing the main (first) route only and having buttons to display alternatives which upon clicking would show only those routes & directions. That said, here is the fix for your question:
您需要做的是检查方向Service.route 函数调用返回了多少条路由，在接收响应对象 response.routes 的回调函数中，将是一个数组，因此循环遍历它并使用循环计数器设置 routeIndex供 DirectionsRenderer 使用。当然，在我看来，这个结果输出根本不是可取的，因为替代路线的部分经常会重叠，因此对于用户来说，其他额外线路的情况并不总是在视觉上显而易见。以及如果您实际显示文本方向，将需要不同的 DOM 元素来显示每组方向，然后令人困惑的是哪个组用于什么。我宁愿建议只显示主要（第一）路线，并有按钮来显示选择，点击后将只显示那些路线和方向。也就是说，这是您问题的解决方案：
directionsService.route(
directionsRequest,
function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
for (var i = 0, len = response.routes.length; i < len; i++) {
new google.maps.DirectionsRenderer({
map: mapObject,
directions: response,
routeIndex: i
});
}
} else {
$("#error").append("Unable to retrieve your route<br />");
}
}
);
