我想将谷歌地图显示的持续时间放入变量（例如变量dur）。该文本现在直接出现在html上。我希望它在例如dur =“21930秒”这是怎么做到的？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Complex</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body style="font-family: Arial; font-size: 13px; color: red;">
<div id="map" style="width: 400px; height: 300px;"></div>
<div id="duration">Duration: </div>
<div id="distance">Distance: </div>
<script type="text/javascript">
var directionsService = new google.maps.DirectionsService();
var Anfang=new google.maps.LatLng(48.158572777778, 11.581866944444);
var Ende= new google.maps.LatLng(48.22, 11.22);
console.log(Anfang);
var request = {
origin: Anfang,
destination: Ende,
travelMode: google.maps.DirectionsTravelMode.WALKING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
// Display the distance:
document.getElementById('distance').innerHTML +=
response.routes[0].legs[0].distance.value;
// Display the duration:
document.getElementById('duration').innerHTML +=
response.routes[0].legs[0].duration.text;
}
});
</script>
</body>
</html>
更新
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<table class="table table-condensed" border="1" id="usertable"></table>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox"> BMW 1er
</label>
<label class="btn btn-primary">
<input type="checkbox"> MINI Cooper
</label>
<label class="btn btn-primary">
<input type="checkbox"> BMW ActiveE
</label>
</div>
</head>
<body>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function callJSON() {
setTimeout(function () {
$.getJSON('./url.php', function(data) {
$ ("#usertable").empty();
//$data.sort(function(a,b) { return parseFloat(b.fuelState) - parseFloat(a.fuelState) } );
var cars = data.rec.vehicles.vehicles;
$.each(cars, function(key, data){
var directionsService = new google.maps.DirectionsService();
var Anfang=new google.maps.LatLng(48.158572777778, 11.581866944444);
var Ende= new google.maps.LatLng(data.position.latitude, data.position.longitude);
var request = {
origin: Anfang,
destination: Ende,
travelMode: google.maps.DirectionsTravelMode.WALKING};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var dur = response.routes[0].legs[0].duration.text;}});
var laenge=cars.length;
var vint=data.vin;
var coopers="";
var tanken="";
var drive="MAN";
var fuelfarbe="#01DF3A";
var prozent="%";
var kosten=" 31 Cent/Min "
var tanksymbol="glyphicon-tint";
var farbe="success";
var flugbadge="";
var ortbadge="glyphicon-map-marker";
var v=vint.substring(3,7);
if(v=="SX31"){coopers=" S";}
if(v=="SW71"){coopers=" SD";}
if(data.model=="BMW ActiveE "){tanksymbol="glyphicon-flash";}
if(data.model=="BMW X1 "){kosten=" 34 Cent/Min ";}
if(data.auto=="Y"){drive="AUT";}
if((48.347910654607695 < data.position.latitude && data.position.latitude < 48.35988839686733)&&(11.781678199768066 < data.position.longitude && data.position.longitude < 11.792492866516113)){flugbadge="<span class='badge'>+12€</span>"; ortbadge="glyphicon-plane";}
if(data.fuelState<=25){tanken="20 Freiminuten für Vollbetankung"; farbe="warning";}
$('#usertable').append(
function() {
return "<tr class="+farbe+">"+
"<td><span class='glyphicon glyphicon-user'></span> "+data.carName+"</td>"+
"<td>"+data.model+coopers+"</td>"+
"<td>"+drive+"</td>"+
"<td><span class='glyphicon "+tanksymbol+"'></span>" +data.fuelState+"</td>"+
"<td>"+data.licensePlate+"</td>"+
"<td><span class='glyphicon "+ortbadge+"'></span> "+data.address+"</td>"+
"<td><span class='glyphicon "+ortbadge+"'></span> "+dur+"</td>"+
"<td><span class='glyphicon glyphicon-euro'></span>"+kosten+flugbadge+"</td>"+
"<td>"+laenge+"</td>"+
"<td><a href='https://de.drive-now.com/php/metropolis/vehicle_details?vin="+ data.vin +"'target='_blank'><button class='btn btn-success btn-xs' type='button'>Reservieren</button></a></td>"+
//"<td><img src='"+data.model+"1.png'/></td>"+
"<tr>";
}
);
})
}).always(callJSON);
}, 2000);
}
$(callJSON);
});
</script>
</body>
</html>