-1
Ich habe wenig Skript mit Google Maps API - Adresse vom Benutzer erhalten (Start und Ziel) und Skript zeigt mir Geo-Koordinaten und Entfernung von Google Matrix-Service. Das Problem ist: Wenn ich auf den Button Koordinaten berechnen und Entfernung klicke, muss ich zweimal klicken - zuerst um die Koordinaten anzuzeigen und dann um die Entfernung zwischen den Koordinaten anzuzeigen. Vielleicht kennen Sie die Lösung dafür?Haben Sie auf die Schaltfläche Javascript zweimal klicken - Google Maps
var firstCityLocationLtd = "";
\t \t var secondCityLocationLtd = "";
var distanceKm = "";
document.getElementById('submit').addEventListener('click', function() {
initGeocoder();
});
\t
\t function initGeocoder() {
\t \t var geocoder = new google.maps.Geocoder();
var firstCityLocation = document.getElementById('firstLocation').value;
\t \t var secondCityLocation = document.getElementById('secondLocation').value; \t \t
\t \t
\t \t
geocoder.geocode({'address': firstCityLocation}, function(results, status) {
if (status === 'OK') {
\t \t firstCityLocationLtd = results[0].geometry.location;
document.getElementById("result1").innerHTML = firstCityLocationLtd;
} else {
alert('Error: ' + status);
}
});
\t \t
\t \t geocoder.geocode({'address': secondCityLocation}, function(results, status) {
if (status === 'OK') {
\t \t secondCityLocationLtd = results[0].geometry.location;
document.getElementById("result2").innerHTML = secondCityLocationLtd;
} else {
alert('Error: ' + status);
}
});
\t \t var service = new google.maps.DistanceMatrixService;
service.getDistanceMatrix({
origins: [firstCityLocationLtd],
destinations: [secondCityLocationLtd],
travelMode: 'DRIVING',
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, function callback(response, status) {
if (status !== 'OK') {
alert('Error was: ' + status);
} else {
var originList = response.originAddresses;
var destinationList = response.destinationAddresses;
//var outputDiv = document.getElementById('output');
//outputDiv.innerHTML = '';
for (var i = 0; i < originList.length; i++) {
var results = response.rows[i].elements;
geocoder.geocode({'address': originList[i]});
for (var j = 0; j < results.length; j++) {
geocoder.geocode({'address': destinationList[j]});
distanceKm += results[j].distance.value; \t \t \t \t
}
\t \t \t
}
\t \t \t showRoadDetails(firstCityLocationLtd, secondCityLocationLtd, distanceKm);
}
})
\t \t }
\t \t
\t \t function showRoadDetails(start, end, distance){
\t \t \t document.getElementById("result1").innerHTML = start;
\t \t \t document.getElementById("result2").innerHTML = end;
\t \t \t document.getElementById("output").innerHTML = distance/1000;
\t \t
\t \t }body {
height:100%;
}
.jumbotron {
\t margin-top:20%;
\t background-color: rgba(238,238,238,0.9);
}
.game p.labels {
\t margin-bottom:2px;
\t font-size:14px;
\t text-transform:uppercase;
}
.inputForm {
\t margin-bottom:10px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container-fluid main">
\t \t <div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
\t <div class="game">
\t <div class="row">
\t <div class="col-md-4">
<h3>Your road</h3>
\t \t \t <p class="labels">From</p><input id="firstLocation" type="textbox" value="Wrocław, Poland" class="inputForm">
\t \t \t <p class="labels">To</p><input id="secondLocation" type="textbox" value="Warszawa, Poland" class="inputForm"><br/>
\t \t \t
\t \t </div>
</div>
\t <div class="row">
\t \t <div class="col-md-12 text-center">
\t \t \t \t <input id="submit" type="button" value="Calculate it">
\t \t \t <div id="result1"></div>
\t \t \t <div id="result2"></div>
\t \t \t <div id="output"></div>
\t \t </div>
\t </div>
\t \t </div>
</div> <!-- /container -->
\t </div>
\t </div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBU2QyOcVY_qoDykdLzX4ywANyPbXJVfZI&callback=initGeocoder&libraries=geometry">
</script>
Warum rufen Sie den Geocoder innerhalb der Rückruf an den distanceMatrix? Das verkompliziert die Sache sicherlich (und der Anruf hat keine Rückruffunktion, so dass er nichts Nützliches tut, sondern sein Kontingent verbraucht). – geocodezip
Entfernungsmatrix funktioniert auch für die Adresse des Benutzers. Gibt es einen Grund, warum Sie Geocoder verwenden, um die Koordinaten zu erhalten und sie an die Entfernungsmatrix zu übergeben? – Coder
@geocodezip Ich habe diese Lösung auf der Google Maps API-Seite gesehen, ich wusste nicht, dass das unnötig ist. Vielen Dank! – Adrian