必须两次单击按钮 Javascript - Google 地图

Question

我有 Google Maps API 的小脚本 - 从用户（起点和目的地）获取地址，脚本向我显示地理坐标和与 Google Matrix 服务的距离。 问题是：当我单击按钮来计算坐标和距离时，我需要单击它两次 - 第一次显示坐标，第二次显示它之间的距离。 也许你知道它的解决方案吗？

 var firstCityLocationLtd = ""; var secondCityLocationLtd = ""; var distanceKm = ""; document.getElementById('submit').addEventListener('click', function() { initGeocoder(); }); function initGeocoder() { var geocoder = new google.maps.Geocoder(); var firstCityLocation = document.getElementById('firstLocation').value; var secondCityLocation = document.getElementById('secondLocation').value; geocoder.geocode({'address': firstCityLocation}, function(results, status) { if (status === 'OK') { firstCityLocationLtd = results[0].geometry.location; document.getElementById("result1").innerHTML = firstCityLocationLtd; } else { alert('Error: ' + status); } }); geocoder.geocode({'address': secondCityLocation}, function(results, status) { if (status === 'OK') { secondCityLocationLtd = results[0].geometry.location; document.getElementById("result2").innerHTML = secondCityLocationLtd; } else { alert('Error: ' + status); } }); 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; } } showRoadDetails(firstCityLocationLtd, secondCityLocationLtd, distanceKm); } }) } function showRoadDetails(start, end, distance){ document.getElementById("result1").innerHTML = start; document.getElementById("result2").innerHTML = end; document.getElementById("output").innerHTML = distance/1000; }

 body { height:100%; } .jumbotron { margin-top:20%; background-color: rgba(238,238,238,0.9); } .game p.labels { margin-bottom:2px; font-size:14px; text-transform:uppercase; } .inputForm { 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"> <div class="container"> <!-- Main component for a primary marketing message or call to action --> <div class="jumbotron"> <div class="game"> <div class="row"> <div class="col-md-4"> <h3>Your road</h3> <p class="labels">From</p><input id="firstLocation" type="textbox" value="Wrocław, Poland" class="inputForm"> <p class="labels">To</p><input id="secondLocation" type="textbox" value="Warszawa, Poland" class="inputForm"><br/> </div> </div> <div class="row"> <div class="col-md-12 text-center"> <input id="submit" type="button" value="Calculate it"> <div id="result1"></div> <div id="result2"></div> <div id="output"></div> </div> </div> </div> </div> <!-- /container --> </div> </div> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBU2QyOcVY_qoDykdLzX4ywANyPbXJVfZI&callback=initGeocoder&libraries=geometry"> </script>

Answer 1

在调用 DistanceMatrixService 之前，您必须等待地理编码器服务的结果。 你可以用 Promises 做到这一点（看看下面的代码片段）

 // Code goes here var firstCityLocationLtd = ""; var secondCityLocationLtd = ""; var distanceKm = ""; document.getElementById('submit').addEventListener('click', function() { initGeocoder(); }); function initGeocoder() { var geocoder = new google.maps.Geocoder(); var firstCityLocation = document.getElementById('firstLocation').value; var secondCityLocation = document.getElementById('secondLocation').value; var deferFistLocation = $.Deferred(); var deferSecondLocation = $.Deferred(); geocoder.geocode({ 'address': firstCityLocation }, function(results, status) { if (status === 'OK') { firstCityLocationLtd = results[0].geometry.location; document.getElementById("result1").innerHTML = firstCityLocationLtd; deferFistLocation.resolve(); } else { deferFistLocation.reject(); alert('Error: ' + status); } }); geocoder.geocode({ 'address': secondCityLocation }, function(results, status) { if (status === 'OK') { secondCityLocationLtd = results[0].geometry.location; document.getElementById("result2").innerHTML = secondCityLocationLtd; deferSecondLocation.resolve(); } else { deferSecondLocation.reject(); alert('Error: ' + status); } }); $.when(deferFistLocation, deferSecondLocation).done(function() { 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; } } showRoadDetails(firstCityLocationLtd, secondCityLocationLtd, distanceKm); } }) }); } function showRoadDetails(start, end, distance) { document.getElementById("result1").innerHTML = start; document.getElementById("result2").innerHTML = end; document.getElementById("output").innerHTML = distance / 1000; }

 body { height:100%; } .jumbotron { margin-top:20%; background-color: rgba(238,238,238,0.9); } .game p.labels { margin-bottom:2px; font-size:14px; text-transform:uppercase; } .inputForm { 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"> <div class="container"> <!-- Main component for a primary marketing message or call to action --> <div class="jumbotron"> <div class="game"> <div class="row"> <div class="col-md-4"> <h3>Your road</h3> <p class="labels">From</p><input id="firstLocation" type="textbox" value="Wrocław, Poland" class="inputForm"> <p class="labels">To</p><input id="secondLocation" type="textbox" value="Warszawa, Poland" class="inputForm"><br/> </div> </div> <div class="row"> <div class="col-md-12 text-center"> <input id="submit" type="button" value="Calculate it"> <div id="result1"></div> <div id="result2"></div> <div id="output"></div> </div> </div> </div> </div> <!-- /container --> </div> </div> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBU2QyOcVY_qoDykdLzX4ywANyPbXJVfZI&callback=initGeocoder&libraries=geometry"> </script>