javascript - JavaScript 变量和谷歌地图距离服务

Question

我使用 Google Maps Distance Service API 来获取两点之间的行驶距离和时间。这是我的代码：

<div id="right-panel">
  <div id="output"></div>
</div>
<div id="map"></div>
<script>

  function initMap() {
    var bounds = new google.maps.LatLngBounds;
    var markersArray = [];

    var origin1 = "<?php echo $partenza; ?>";
    var destinationA = "<?php echo $destinazione; ?>";

    var destinationIcon = 'https://chart.googleapis.com/chart?' +
        'chst=d_map_pin_letter&chld=D|FF0000|000000';
    var originIcon = 'https://chart.googleapis.com/chart?' +
        'chst=d_map_pin_letter&chld=O|FFFF00|000000';
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 55.53, lng: 9.4},
      zoom: 10
    });
    var geocoder = new google.maps.Geocoder;

    var service = new google.maps.DistanceMatrixService;

    distanza = 0;
    service.getDistanceMatrix({
      origins: [origin1],
      destinations: [destinationA],
      travelMode: 'DRIVING',
      unitSystem: google.maps.UnitSystem.METRIC,
      avoidHighways: false,
      avoidTolls: false
    }, function(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 = '';
        deleteMarkers(markersArray);

        var showGeocodedAddressOnMap = function(asDestination) {
          var icon = asDestination ? destinationIcon : originIcon;
          return function(results, status) {
            if (status === 'OK') {
              map.fitBounds(bounds.extend(results[0].geometry.location));
              markersArray.push(new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                icon: icon
              }));
            } else {
              alert('Geocode was not successful due to: ' + status);
            }
          };
        };


        results = response.rows[0].elements;
        geocoder.geocode({'address': originList[0]},
            showGeocodedAddressOnMap(false));

          geocoder.geocode({'address': destinationList[0]},
              showGeocodedAddressOnMap(true));
          outputDiv.innerHTML += results[0].distance.text + ' in ' +
              results[0].duration.text + '<br>';

              distanza = results[0].distance.value;
              durata = results[0].duration.value;

            document.innerHTML = distanza + "<br>" + durata;

      }
    });
  }

  function deleteMarkers(markersArray) {
    for (var i = 0; i < markersArray.length; i++) {
      markersArray[i].setMap(null);
    }
    markersArray = [];
  }

  console.log("Distanza: "+distanza);
  console.log("Durata: "+durata);

</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_API_HERE&callback=initMap">
</script>

我想用“console.log”获取点之间的距离和时间，但是当我输入 console.log("Distanza: "+distanza); javascript控制台说：“未定义距离”......我如何在函数之外访问这两个变量？

标签： javascriptgoogle-maps-api-3variable-declaration

Answer 1

您发布的代码中有多个问题，我只需快速浏览一下就可以看到（了解：我没有测试它）。

正确声明你的变量。就像var distanza = 0;那将是第一个建议。

此外，如果您在函数中声明变量，则只能在该函数中使用它。这称为变量范围。如果您需要一个变量在其他地方可用，请在全局范围内（在任何函数之外）声明它。

然后你应该console.log在你的showGeocodedAddressOnMap里面做你用于地理编码器的回调函数。地理编码器是异步的，所以在你做你的console.log时候，地理编码器很可能还没有返回任何东西。

以下是您的代码的未经测试的更正版本。

var durata, distanza;

function initMap() {
  var bounds = new google.maps.LatLngBounds;
  var markersArray = [];

  var origin1 = "<?php echo $partenza; ?>";
  var destinationA = "<?php echo $destinazione; ?>";

  var destinationIcon = 'https://chart.googleapis.com/chart?' +
    'chst=d_map_pin_letter&chld=D|FF0000|000000';
  var originIcon = 'https://chart.googleapis.com/chart?' +
    'chst=d_map_pin_letter&chld=O|FFFF00|000000';
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 55.53,
      lng: 9.4
    },
    zoom: 10
  });
  var geocoder = new google.maps.Geocoder;

  var service = new google.maps.DistanceMatrixService;

  distanza = 0;
  service.getDistanceMatrix({
    origins: [origin1],
    destinations: [destinationA],
    travelMode: 'DRIVING',
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidHighways: false,
    avoidTolls: false
  }, function(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 = '';
      deleteMarkers(markersArray);

      var showGeocodedAddressOnMap = function(asDestination) {
        var icon = asDestination ? destinationIcon : originIcon;
        return function(results, status) {
          if (status === 'OK') {
            map.fitBounds(bounds.extend(results[0].geometry.location));
            markersArray.push(new google.maps.Marker({
              map: map,
              position: results[0].geometry.location,
              icon: icon
            }));

            distanza = results[0].distance.value;
            durata = results[0].duration.value;

            console.log("Distanza: " + distanza);
            console.log("Durata: " + durata);

          } else {
            alert('Geocode was not successful due to: ' + status);
          }
        };
      };


      results = response.rows[0].elements;
      geocoder.geocode({
          'address': originList[0]
        },
        showGeocodedAddressOnMap(false));

      geocoder.geocode({
          'address': destinationList[0]
        },
        showGeocodedAddressOnMap(true));
      outputDiv.innerHTML += results[0].distance.text + ' in ' +
        results[0].duration.text + '<br>';

      distanza = results[0].distance.value;
      durata = results[0].duration.value;

      document.innerHTML = distanza + "<br>" + durata;

    }
  });
}

function deleteMarkers(markersArray) {
  for (var i = 0; i < markersArray.length; i++) {
    markersArray[i].setMap(null);
  }
  markersArray = [];
}