我想知道是否有办法让api在轮渡时通知我。我知道你可以改变avoidFerries:在true和false之间,但是当设置为true时我需要一种了解渡轮的方法,所以如果需要可以通过外部按钮覆盖。我只需要一种方法让gMaps告诉我已经采取了一个。任何建议都将不胜感激。
问候。
答案 0 :(得分:4)
您必须解析路线的步骤。
当一个步骤乘坐渡轮时,它取决于TravelMode如何检测它。
对于TRANSIT,你必须检查:
step.transit.line.vehicle.type==='FERRY'
对于其他TravelModes,它将是:
step.maneuver==='ferry'
检测它的功能可能如下所示:
/**
* @param route object DirectionsRoute
* @return array with steps where a ferry has been taken
**/
function get_ferries(route){
var f=[],section;
for(var leg=0;leg<route.legs.length;++leg){
for(var step=0;step<route.legs[leg].steps.length;++step){
section = route.legs[leg].steps[step];
if(
section.maneuver==='ferry'
||
(
section.transit
&&
section.transit.line
&&
section.transit.line.vehicle
&&
section.transit.line.vehicle.type==='FERRY'
)
){
f.push(section);
}
}
}
return f;
}
演示:
function initMap() {
var goo = google.maps,
service = new goo.DirectionsService,
map = new goo.Map(document.getElementById('map'), {
zoom: 0,
center: {lat: 0, lng: 0},
noClear:true
}),
renderer = new goo.DirectionsRenderer({suppressMarkers:true,map:map,polylineOptions:{strokeWeight:3,zIndex:100}}),
ctrl = document.getElementById('ctrl'),
sMode = ctrl.querySelector('select[name="mode"]'),
sRoute = ctrl.querySelector('select[name="route"]')
sFerry = ctrl.querySelector('select[name="ferries"]')
calcRoute = function(){
var mode = goo.TravelMode[sMode.value],
avoidFerries = !!parseInt(sFerry.value),
route = sRoute.options[sRoute.selectedIndex],
origin = route.getAttribute('data-origin'),
destination = route.getAttribute('data-destination');
map.data.forEach(function(f){
map.data.remove(f);
});
service.route({
origin : origin,
destination : destination,
travelMode : mode,
avoidFerries: avoidFerries
}, function(response, status) {
renderer.setDirections(response);
if (status !== goo.DirectionsStatus.OK) {
alert('Directions request failed due to ' + status);
}
});
};
map.data.setStyle({
strokeColor: 'tomato',
strokeWeight: 5,
strokeOpacity: 1,
zIndex:1000,
icon: 'https://maps.gstatic.com/mapfiles/transit/iw2/6/ferry.png'
});
map.controls[google.maps.ControlPosition.TOP_CENTER].push(ctrl);
goo.event.addDomListener(sMode, 'change', calcRoute);
goo.event.addDomListener(sRoute, 'change', calcRoute);
goo.event.addDomListener(sFerry, 'change', calcRoute);
goo.event.addListener(renderer,'directions_changed',function(){
var r= this.getDirections(),
i= this.getRouteIndex();
if(r && r.routes && r.routes[i]){
var ferries=get_ferries(r.routes[i]);
if(ferries.length){
alert('Ferries:'+ ferries.length);
for(var f=0;f<ferries.length;++f){
map.data.add({geometry:ferries[f].start_location})
map.data.add({geometry:new goo.Data.LineString(ferries[f].path)})
}
}
}
});
function get_ferries(route){
var f=[],section;
for(var leg=0;leg<route.legs.length;++leg){
for(var step=0;step<route.legs[leg].steps.length;++step){
section = route.legs[leg].steps[step];
if(
section.maneuver==='ferry'
||
(
section.transit
&&
section.transit.line
&&
section.transit.line.vehicle
&&
section.transit.line.vehicle.type==='FERRY'
)
){
f.push(section);
}
}
}
return f;
}
calcRoute();
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map">
<div id="ctrl">
<select name="route">
<option data-origin="Rostock,DE" data-destination="Bornholm,DK">Rostock-Bornholm</option>
<option data-origin="Rotterdam,NL" data-destination="Ipswich,UK">Rotterdam-Ipswich</option>
<option data-origin="Manhattan,US" data-destination="Ellis Island,US">Manhattan-Ellis Island</option>
</select>
<select name="mode">
<option value="DRIVING">Driving</option>
<option value="TRANSIT">Transit</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
</select>
<select name="ferries">
<option value="0">avoidFerries:no</option>
<option value="1">avoidFerries:yes</option>
</select>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&callback=initMap" async defer></script>