必须两次点击按钮Javascript - 谷歌地图

时间：2017-02-09 11:15:27

标签： javascript jquery html5 google-maps

我的Google Maps API脚本很少 - 从用户处获取地址（开始和目的地），脚本显示地理坐标和Google Matrix Service的距离。问题是：当我点击按钮计算坐标和距离时，我需要点击两次 - 首先显示坐标，然后显示它之间的距离。也许你知道它的解决方案吗？

＆＃13;
＆＃13; 
        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;
		
		}
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题