Google Maps API Geocoder無法運作

Question

我正在嘗試使用Geocoder將郵政編碼轉換為lat和lng。 我查看了Google Maps Api示例並遵循了一些教程，但是由於lat和lng的某種原因，它返回“”。 這是我的代碼。

 (function(window, google, address) { var geocoder = new google.maps.Geocoder(); var lat = ""; var lng = ""; geocoder.geocode({ 'address': address }, function(results, status) { var test = results[0]; lat = results[0].geometry.location.lat(); // lat is still equal to "" lng = results[0].geometry.location.lng(); // lng is still equal to "" }); var options = { center: { lat: lat, lng: lng }, zoom: 5 }, element = document.getElementById('map-canvas') var map = new google.maps.Map(element, options) }(window, window.google, 98107)); 

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

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

Answer 1

地理編碼器是異步的。 您需要在存在回調函數的地方/地方使用返回的數據。

(function(window, google, address) {
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    var options = {
        center: results[0].geometry.location,
        zoom: 5
      },
      element = document.getElementById('map-canvas')
    var map = new google.maps.Map(element, options)
  });
}(window, window.google, "98107"));

與發布代碼的另一個問題是address傳遞到地理編碼器必須是字符串（因此“98107”，而不是98107），如果它不是API生成錯誤： InvalidValueError: in property address: not a string

 (function(window, google, address) { var geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'address': address }, function(results, status) { var options = { center: results[0].geometry.location, zoom: 5 }, element = document.getElementById('map-canvas') var map = new google.maps.Map(element, options) }); }(window, window.google, "98107")); 

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

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

Answer 2

geocode（）是一個異步函數 ，您需要等待其回調才能獲得實際結果。

在您的代碼中，您甚至在返回緯度和經度值之前，在回調之外創建中心對象。

嘗試以下方法：

 geocoder.geocode({
     'address': address
 }, function(results, status) {
     var test = results[0];

     var options = {
         center: {
             lat: results[0].geometry.location.lat(),
             lng: results[0].geometry.location.lng()
         },
         zoom: 5
     }
 });