如何以毫秒为单位从 DateTimePicker 检索值作为纪元并将该值传递给 Google API 方向请求?

How to retrieve value from DateTimePicker as epoch in milliseconds & pass this value to Google API Direction request?

Image of current functionality

您好,我在我的应用程序中使用 'xdsoft datetimepicker jquery plugin' (http://xdsoft.net/jqplugins/datetimepicker/),因此用户可以 select a date/time 到达指定目的地。

目前我的应用程序正在使用 Google 的 Javascript API 并允许用户在 2 种出行模式之间切换 - 公交或驾车(如图所示,我已经以上上传)

Google Javascript API 请求:

 directionsService.route({
  origin: pos,
  destination: {lat: *Value*,lng: *Value*}, 

   travelMode: google.maps.TravelMode[selectedMode],
   transitOptions: {
   modes: ['RAIL'],
   **************
   arrivalTime: new Date(), <<< *** WHERE I NEED TO PASS DATE/TIME PICKER VALUE
   **************
   routingPreference: 'FEWER_TRANSFERS'
},
    unitSystem: google.maps.UnitSystem.IMPERIAL,
     provideRouteAlternatives: true
}, function(response, status) {

  if (status == 'OK') {
    directionsDisplay.setDirections(response);
  } else {
    window.alert('Directions request failed due to ' + status);
  }
});
 }

我不确定如何将 date/time 值从选择器传递到 API 请求中的 'arrivalTime: new Date()' 作为以毫秒为单位的纪元时间戳,以便返回基于在 date/time 上,用户已 select 编辑并在每次更改时进行更新。显然默认为不指定日期,GoogleAPIreturns方向为当前时间。

HTML 对于 Date/Time 选择器:

<div id="timepicker">
<input id="datetimepicker" type="text" >
</div>

Javascript 对于 Date/Time 选择器:

jQuery('#datetimepicker').datetimepicker({
 format:'d.m.Y H:i',
 defaultTime:'15:00'
});

我的 API 请求的完整脚本,用于在旅行模式和更新地图之间切换,而不让用户从日期时间选择器指定到达时间:

<script> 
function initMap() {
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;

var lattp = <?php echo json_encode($lattp);?>;
var lngtp = <?php echo json_encode($lngtp);?>;
var zoomtp = <?php echo json_encode($zoomtp);?>;
var tp = {lat: JSON.parse(lattp), lng: JSON.parse(lngtp)};

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 14,
  center: tp
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('right-panel'));

 if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
  var pos = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
  };

  document.getElementsByName('radio').forEach(function(el){
    el.addEventListener('click', function() {
        calculateAndDisplayRoute(directionsService, directionsDisplay, pos);
    });

})

  calculateAndDisplayRoute(directionsService, directionsDisplay, pos);

}, function() {
  handleLocationError(true, markerme);
});
} else {
// Browser doesn't support Geolocation
window.alert('Geolocation is not supported');
} 
}

function calculateAndDisplayRoute(directionsService, directionsDisplay, pos) {
//var selectedMode = document.getElementById('mode').value;
var selectedMode = "";
var radios = document.getElementsByName('radio')
radios.forEach(function(element) {
    if(element.checked){
        selectedMode = element.value;
    }
})

directionsService.route({
  origin: pos,  
  destination: {lat: *Value*,lng: *Value*},  
   travelMode: google.maps.TravelMode[selectedMode],
   transitOptions: {
   modes: ['RAIL'],
   arrivalTime: new Date(),
   routingPreference: 'FEWER_TRANSFERS'
},
    unitSystem: google.maps.UnitSystem.IMPERIAL,
     provideRouteAlternatives: true
}, function(response, status) {

  if (status == 'OK') {
    directionsDisplay.setDirections(response);
  } else {
    window.alert('Directions request failed due to ' + status);
  }
});
}
</script>

在此先感谢您提供的任何帮助 - 非常感谢!

您的格式化输入框已经是 Date 的构造函数可以解析的输入框。只需传入您的输入框的值:

startDate = new Date(jquery('#datetimepicker').val());