Question

我创建了一个HTML页面，用于搜索2个邮政编码，并在它们之间创建路由。

我用过： Google Map + Direction-用于在地图上显示路线，就像GPS GeoCoding-用于从邮政编码获取位置

问题：当我单击“开始！”时第一次单击该按钮，我的变量未定义，第二次正常。

我的代码可能出什么问题了？

感谢高级，史蒂夫

代码：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Displaying Text Directions With setPanel()</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
      #right-panel {
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }

      #right-panel select, #right-panel input {
        font-size: 15px;
      }

      #right-panel select {
        width: 100%;
      }

      #right-panel i {
        font-size: 12px;
      }
      #right-panel {
        height: 100%;
        float: right;
        width: 390px;
        overflow: auto;
      }
      #map {
        margin-right: 400px;
      }
      #floating-panel {
        background: #fff;
        padding: 5px;
        font-size: 14px;
        font-family: Arial;
        border: 1px solid #ccc;
        box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
        display: none;
      }
      @media print {
        #map {
          height: 500px;
          margin: 0;
        }
        #right-panel {
          float: none;
          width: auto;
        }
      }
    </style>
		<!--async defer-->
    <script 
    src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY">
    </script>
  </head>
  <body onload="initMap()">
    <div id="floating-panel">
	<form onsubmit="codeAddress(); return false" action="#">
      <strong>Start:</strong>
	  <input id="start" size="30" type="text" value="403503" />
      <br>
      <strong>End:</strong>
	  <input id="end" size="30" type="text" value="788003" />
	  <input type="submit" value="GO!">
	  <input type="button" onclick="clear()" value="Clear markers" />
	</form>
    </div>
    <div id="right-panel"></div>
    <div id="map"></div>
    <script>
	var map;
	var directionsDisplay;
	var directionsService;
	var firstAddress;
	var secondAddress;
	var geocoder;
	
      function initMap() {
        directionsDisplay = new google.maps.DirectionsRenderer;
        directionsService = new google.maps.DirectionsService;
		
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 7,
          center: {lat: 41.85, lng: -87.65}
        });
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('right-panel'));

        var control = document.getElementById('floating-panel');
        control.style.display = 'block';
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
		
		/*geocoder = new google.maps.Geocoder();*/
        /*var onChangeHandler = function() {
          calculateAndDisplayRoute(directionsService, directionsDisplay);
        };
        document.getElementById('searchBtn').addEventListener('click', onChangeHandler);*/
       // document.getElementById('end').addEventListener('change', onChangeHandler);
      }

	  function clear()
	  {
		map.clearOverlays();
		firstAddress="";
	    secondAddress="";
	  }
      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        var start = firstAddress;
        var end = secondAddress;
		alert('Start:' + firstAddress + ' End: '+secondAddress);
        directionsService.route({
          origin: start,
          destination: end,
          travelMode: 'DRIVING'
        }, function(response, status) {
          if (status === 'OK') {
            directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }

	   function codeAddress() {
        var zip1 = document.getElementById('start').value;
		var zip2 = document.getElementById('end').value;
		/*firstAddress="";
	    secondAddress="";*/
	    geocoder = new google.maps.Geocoder();
        geocoder.geocode( { 'address': zip1}, function(results1, status1) {
          if (status1 == google.maps.GeocoderStatus.OK) {
            /*map.setCenter(results[0].geometry.location);
            if(marker)
              marker.setMap(null);
            marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                draggable: true
            });
            google.maps.event.addListener(marker, "dragend", function() {
              document.getElementById('lat').value = marker.getPosition().lat();
              document.getElementById('lng').value = marker.getPosition().lng();
            });
            document.getElementById('lat').value = marker.getPosition().lat();
            document.getElementById('lng').value = marker.getPosition().lng();*/
			firstAddress=results1[0].geometry.location;
			alert();
          } else {
            alert('Geocode Zipcode 1 was not successful for the following reason: ' + status);
          }
        });
		geocoder.geocode( { 'address': zip2}, function(results2, status2) {
          if (status2 == google.maps.GeocoderStatus.OK) {
            /*map.setCenter(results[0].geometry.location);
            if(marker)
              marker.setMap(null);
            marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                draggable: true
            });
            google.maps.event.addListener(marker, "dragend", function() {
              document.getElementById('lat').value = marker.getPosition().lat();
              document.getElementById('lng').value = marker.getPosition().lng();
            });
            document.getElementById('lat').value = marker.getPosition().lat();
            document.getElementById('lng').value = marker.getPosition().lng();*/
			secondAddress=results2[0].geometry.location;
          } else {
            alert('Geocode Zipcode 2 was not successful for the following reason: ' + status);
          }
        });
		
		/*directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('right-panel'));

        var control = document.getElementById('floating-panel');
        control.style.display = 'block';
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);*/
		
		calculateAndDisplayRoute(directionsService, directionsDisplay);
      }
    </script>
	<!--async defer-->
    <!--<script 
    src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
    </script>-->
  </body>
</html>

Answer 1

function codeAddress() {
        var zip1 = document.getElementById('start').value;
        var zip2 = document.getElementById('end').value;

        geocoder = new google.maps.Geocoder();
        var promise1 = new Promise(function(res, rej){
        geocoder.geocode( { 'address': zip1}, function(results1, status1) {
          if (status1 == google.maps.GeocoderStatus.OK) {
            resolve(results1[0].geometry.location);
          } else {
            reject('Geocode Zipcode 1 was not successful for the following reason: ' + status);
          }
        });

    });
        var promise2 = new Promise(function(res, rej){
        geocoder.geocode( { 'address': zip2}, function(results2, status2) {
          if (status2 == google.maps.GeocoderStatus.OK) {
            secondAddress=results2[0].geometry.location;
          } else {
            alert('Geocode Zipcode 2 was not successful for the following reason: ' + status);
          }
        });
});

Promise.all([promise1, promise2]).then(values = {
   firstAddress = values[0];
secondAddress = values[1];
  calculateAndDisplayRoute(directionsService, directionsDisplay);
})
      }

只是希望Google API始终能够响应您的代码调用。两次调用都可以响应后，它将调用您的最后一个函数

搜索ZipCode网站-仅在第二次点击时显示结果

1 个答案: