[英]Multiple travel modes to render one map using google maps API
I have a 3 legged trip with two different travel types. 我有两种不同旅行方式的3腿旅行。 Because of the two different travel types I used 3 requests and specified the travel type for each request.
由于两种不同的旅行类型,我使用了3个请求,并为每个请求指定了旅行类型。
App.directionsService.route(startLeg, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
App.directionsDisplay1.setDirections(result);
}
});
App.directionsService.route(middleLeg, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
App.directionsDisplay2.setDirections(result);
}
});
App.directionsService.route(endLeg, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
App.directionsDisplay3.setDirections(result);
}
Is it possible to render all three sets of results on the map? 是否可以在地图上渲染所有三组结果?
As requested an example using multiple DirectionsRenderer-instances(AFAIK there is no limit for the used instances): 如所要求的使用多个DirectionsRenderer-instances(AFAIK的示例,使用的实例没有限制)的示例:
var goo = google.maps,
map = new goo.Map(document.getElementById('map-canvas'), {
center: new goo.LatLng(52.52, 13.40),
zoom: 10
}),
App = {
map: map,
bounds: new goo.LatLngBounds(),
directionsService: new goo.DirectionsService(),
directionsDisplay1: new goo.DirectionsRenderer({
map: map,
preserveViewport: true,
polylineOptions: {
strokeColor: 'red'
}
}),
directionsDisplay2: new goo.DirectionsRenderer({
map: map,
preserveViewport: true,
polylineOptions: {
strokeColor: 'blue'
}
}),
directionsDisplay3: new goo.DirectionsRenderer({
map: map,
preserveViewport: true,
polylineOptions: {
strokeColor: 'yellow'
}
})
},
startLeg = {
origin: 'Rome',
destination: 'Paris',
travelMode: goo.TravelMode.DRIVING
},
middleLeg = {
origin: 'Paris',
destination: 'Berlin',
travelMode: goo.TravelMode.TRANSIT
},
endLeg = {
origin: 'Berlin',
destination: 'Buxtehude',
travelMode: goo.TravelMode.BICYCLING
};
App.directionsService.route(startLeg, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
App.directionsDisplay1.setDirections(result);
App.map.fitBounds(App.bounds.union(result.routes[0].bounds));
}
});
App.directionsService.route(middleLeg, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
App.directionsDisplay2.setDirections(result);
App.map.fitBounds(App.bounds.union(result.routes[0].bounds));
}
});
App.directionsService.route(endLeg, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
App.directionsDisplay3.setDirections(result);
App.map.fitBounds(App.bounds.union(result.routes[0].bounds));
}
});
Demo(including instructions-panel): http://jsfiddle.net/doktormolle/y6xEP/ 演示(包括说明面板): http : //jsfiddle.net/doktormolle/y6xEP/
Note: my example uses adresses, it will not result in a continuous route. 注意:我的示例使用的是地址,它不会导致连续的路线。 To get a continuous route with adresses you must send the requests one by one and use the destination-LatLng of the previous response as origin for the next request
要获得包含地址的连续路由,您必须一个接一个地发送请求,并使用上一个响应的destination-LatLng作为下一个请求的来源
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.