如何以毫秒为单位从 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());
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());