2013-05-08 65 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在下星期六出發例