2013-05-08 89 views
0

我已经使用了tutsplus的下列代码,并将其改编为使用转运选项,除非它没有出发时间选项不起作用,我无法获得它的工作。来自google api的地图

http://wp.tutsplus.com/tutorials/creative-coding/give-your-customers-driving-directions-with-the-google-maps-api/

我已经尝试了所有可能的方式来添加departureTime/arrivalTime(DEPARTURE_TIME和ARRIVAL_TIME,但我只是不能得到它的工作!请帮帮我!

这确实不是帮我以任何方式:https://developers.google.com/maps/documentation/javascript/directions?hl=fr

会很感激这个

var WPmap = { 

    // HTML Elements we'll use later! 
    mapContainer : document.getElementById('map-container'), 
    dirContainer : document.getElementById('dir-container'), 
    toInput  : document.getElementById('map-config-address'), 
    fromInput  : document.getElementById('from-input'), 
    unitInput  : document.getElementById('unit-input'), 
    travelMode  : document.getElementById('travel-mode'),  
    startLatLng : null, 

    // Google Maps API Objects 
    dirService  : new google.maps.DirectionsService(), 
    dirRenderer : new google.maps.DirectionsRenderer(), 
    map:null, 

    showDirections:function (dirResult, dirStatus) { 
     if (dirStatus != google.maps.DirectionsStatus.OK) { 
      switch (dirStatus){ 
       case "ZERO_RESULTS" : alert ('Sorry, we can\'t provide directions to that address. Please try again.') 
        break; 
       case "NOT_FOUND" : alert('Sorry we didn\'t understand the address you entered - Please try again.'); 
        break; 
       default : alert('Sorry, there was a problem generating the directions. Please try again.') 
      } 
      return; 
     } 
     // Show directions 
     WPmap.dirRenderer.setMap(WPmap.map); 
     WPmap.dirRenderer.setPanel(WPmap.dirContainer); 
     WPmap.dirRenderer.setDirections(dirResult); 
    }, 

    getStartLatLng:function() { 
     var n = WPmap.toInput.value.split(","); 
     WPmap.startLatLng = new google.maps.LatLng(n[0], n[1]); 
    }, 

    getSelectedUnitSystem:function() { 
     return WPmap.unitInput.options[WPmap.unitInput.selectedIndex].value == 'metric' ? 
      google.maps.DirectionsUnitSystem.METRIC : 
      google.maps.DirectionsUnitSystem.IMPERIAL; 
    }, 

    getSelectedTravelMode:function() { 
     return WPmap.travelMode.options[WPmap.travelMode.selectedIndex].value == 'driving' ? 
      google.maps.DirectionsTravelMode.DRIVING : 
      google.maps.DirectionsTravelMode.WALKING; 
      google.maps.DirectionsTravelMode.TRANSIT;  
    }, 

    getDirections:function() { 

     var fromStr = WPmap.fromInput.value; //Get the postcode that was entered 

     var dirRequest = { 
      origin  : fromStr, 
      destination : WPmap.startLatLng, 
      travelMode : WPmap.getSelectedTravelMode(), 
      unitSystem : WPmap.getSelectedUnitSystem() 
     }; 

     WPmap.dirService.route(dirRequest, WPmap.showDirections); 
    }, 

    init:function() { 

     //get the content 
     var infoWindowContent = WPmap.mapContainer.getAttribute('data-map-infowindow'); 
     var initialZoom  = WPmap.mapContainer.getAttribute('data-map-zoom'); 

     WPmap.getStartLatLng(); 

     //setup the map. 
     WPmap.map = new google.maps.Map(WPmap.mapContainer, { 
      scrollwheel: false, 
      zoom:parseInt(initialZoom),  //ensure it comes through as an Integer 
      center:WPmap.startLatLng, 
      mapTypeId:google.maps.MapTypeId.HYBRID 
     }); 

     //setup the red pin marker 
     marker = new google.maps.Marker({ 
      map:WPmap.map, 
      position:WPmap.startLatLng, 
      draggable:false 
     }); 


     //set the infowindow content 
     infoWindow = new google.maps.InfoWindow({ 
      content:infoWindowContent 
     }); 
     infoWindow.open(WPmap.map, marker); 

     //listen for when Directions are requested 
     google.maps.event.addListener(WPmap.dirRenderer, 'directions_changed', function() { 

      infoWindow.close();   //close the first infoWindow 
      marker.setVisible(false); //remove the first marker 

      //setup strings to be used. 
      var distanceString = WPmap.dirRenderer.directions.routes[0].legs[0].distance.text; 

      //set the content of the infoWindow before we open it again. 
      infoWindow.setContent('Thanks!<br /> It looks like you\'re about <strong> ' + distanceString + '</strong> away from us. <br />Directions are just below the map'); 

      //re-open the infoWindow 
      infoWindow.open(WPmap.map, marker); 
      setTimeout(function() { 
       infoWindow.close() 
      }, 8000); //close it after 8 seconds. 

     }); 
    }//init 
}; 

google.maps.event.addDomListener(window, 'load', WPmap.init); 

回答

0

的那个的ressource真的不以任何方式帮助你包含所有你需要的细节。

getDirections()您必须添加一个transitOptions -object到dirRequest其中必须包含arrivalTime -or departureTime - 属性。两个对象的预期值是上午8:00在下星期五出发一个Date-object

例子:

var dirRequest = { 
     origin  : fromStr, 
     destination : WPmap.startLatLng, 
     travelMode : WPmap.getSelectedTravelMode(), 
     unitSystem : WPmap.getSelectedUnitSystem(), 
     transitOptions:{ 
         arrivalTime: new Date(2013, 4, 11, 16, 0, 0) 
         } 
    }; 

var dirRequest = { 
     origin  : fromStr, 
     destination : WPmap.startLatLng, 
     travelMode : WPmap.getSelectedTravelMode(), 
     unitSystem : WPmap.getSelectedUnitSystem(), 
     transitOptions:{ 
         departureTime: new Date(2013, 4, 10, 8, 0, 0) 
         } 
    }; 

日下午4:00在下星期六出发例