javascript - 如何根据街道地址设置谷歌地图的中心

Question

我刚刚开始使用 Google Maps API 和地理编码服务。我关注了 this 教程，很棒。

现在我希望能够创建一个以位置(“Vancvouer, BC”)为中心的 map ，而不是创建 map 时所需的纬度和经度。

我想做的是使用名为“initMap()”的回调函数来初始化 map ，在该函数中我创建了一个 Geocoder 对象以根据位置获取 lang 和 long。 (“温哥华，不列颠哥伦比亚省”)。

这是我的 initMap() 函数:

function initMap() {

    var geocoder1 = new google.maps.Geocoder();
    var center = getCenter(geocoder1, 'Vancouver, BC');

    if(center != null) {
        alert(center[0].geometry.location);
    }

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: {lat: -34.397, lng: 150.644}
    });
}

这就是我根据地址获取 lang 和 long 的方式:

function getCenter(geocoder, address) {
    geocoder.geocode({'address': address}, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            console.log(results);
            var result = results[0].geometry.location.toJSON();
            return result;
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
            // return null;
        }
    });
}

这将返回一个包含我想要的经纬度和经纬度的 JSON 对象，但是当我尝试使用 if 语句在 initMap() 中访问它的值时，center 始终未定义。

一旦我能够获得中心的值，我相信我能够很容易地设置中心，但为什么我没有获得这些值？

我认为这是范围和回调函数的问题，但无法弄清楚。被困了一段时间，以为我会伸出援手。

谢谢，

马特

附言如果您需要任何其他信息，请告诉我。关于 stackoverflow 的第一篇文章...

Answer 1

地理编码器是异步的，您不能从异步回调函数返回任何内容。您需要在回调函数可用时/在可用时使用返回的数据:

function setCenter(geocoder, address) {
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
      // return null;
    }
  });
}

proof of concept fiddle

代码片段:

function initMap() {

  var geocoder1 = new google.maps.Geocoder();
  setCenter(geocoder1, 'Vancouver, BC');
}

function setCenter(geocoder, address) {
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
      // return null;
    }
  });
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>

<div id="map"></div>