Question

我刚开始使用Google Maps API和地理编码服务。我按照 this 教程进行了操作，非常棒。

现在我希望能够创建一个基于位置（“Vancvouer，BC”）的中心地图，而不是创建地图时所需的纬度和经度。

我要做的是使用名为“initMap（）”的回调函数来初始化地图，在该函数中，我创建了一个Geocoder对象，以根据位置获取lang和long。（“Vancvouer，BC”）。

这是我的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;
        }
    });
}

这将返回一个带有我想要的lat和lang的JSON对象，但是当我尝试使用if语句访问initMap（）中的值时，中心始终是未定义的。

一旦我能够获得中心的价值，我相信我能够轻松设置中心，但为什么我没有得到这些价值？

我认为它是范围和回调函数的问题，但无法弄明白。被困了一段时间，以为我会伸手去寻求帮助。

谢谢，

马特

P.S。如果您需要任何其他信息，请告诉我。 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

代码段

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您无需将结果转换为Json。使用

    center[0].geometry.location

可以将其指定给地图对象的 center 属性。要检查null：

    if (center[0] != null)

Answer 3

在地图输入后按地址设置中心：

示例：

set_center(address)

function set_center(address) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({address: address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
      }
    })
  }

var“map”必须与谷歌地图合作，例如

   var map = new google.maps.Map(document.getElementById('main-map'), mapOptions);

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

3 个答案: