Google Maps api V3 Ferry检测

时间:2015-09-04 13:12:31

标签: google-maps-api-3

我想知道是否有办法让api在轮渡时通知我。我知道你可以改变avoidFerries:在true和false之间,但是当设置为true时我需要一种了解渡轮的方法,所以如果需要可以通过外部按钮覆盖。我只需要一种方法让gMaps告诉我已经采取了一个。任何建议都将不胜感激。

问候。

1 个答案:

答案 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>