從名稱或郵政編碼獲取經緯度 - 谷歌API

Question

我編輯了下面的代碼，並把完整的JS。我正試圖提取給定郵編或城市附近的地點列表。我的第一步是取郵政編碼或城市名稱並獲取latlng座標，然後獲取地點列表。我收到以下錯誤「無法調用方法'geocode'未定義的」&「無法讀取屬性'offsetWidth'null」任何幫助將不勝感激。

var placesList; 
    var geocoder; 
    var map; 

    function initialize() { 
     map = new google.maps.Map(document.getElementById('map')); 
     geocoder = new google.maps.Geocoder(); 
    } 

    function getLatLng(address, callback) { 
     geocoder.geocode({ 
      address: address 
     }, function (results, status) { 
      if (status === google.maps.GeocoderStatus.OK) { 
       var location = new google.maps.LatLng(result.lat(), result.lng());      
       map.setCenter(location); 
       var marker = new google.maps.Marker({ 
        map: map, 
        position: location 
       }); 
       callback(location); 
      } else { 
       alert('Geocode was not successful for the following reason: ' + status); 
      } 
     }); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
    getLatLng('14235', function (latLngLocation) { 
     var pyrmont = latLngLocation; 
     var request = { 
      location: pyrmont, 
      radius: 5000, 
      types: ['park', 'zoo'] 
     }; 
     placesList = document.getElementById('places'); 
     var service = new google.maps.places.PlacesService(map); 
     service.nearbySearch(request, callback); 
     var request1 = { 
      reference: place.reference 
     }; 
     service.getDetails(request1, createMarkers); 

     function callback(results, status, pagination) { 
      if (status != google.maps.places.PlacesServiceStatus.OK) { 
       return; 
      } else { 
       for (var i = 0; i < results.length; i++) { 
        var markerPlace = results[i]; 
        createMarkers(markerPlace, status); 
       } 

       if (pagination.hasNextPage) { 
        var moreButton = document.getElementById('more'); 
        moreButton.disabled = false; 
        google.maps.event.addDomListenerOnce(moreButton, 'click', 
         function() { 
          moreButton.disabled = true; 
          pagination.nextPage(); 
         }); 
       } 
      } 
     } 


     function createMarkers(place, status) { 
      if (status == google.maps.places.PlacesServiceStatus.OK) { 

       var bounds = new google.maps.LatLngBounds(); 
       var image = { 
        url: place.icon, 
        size: new google.maps.Size(71, 71), 
        origin: new google.maps.Point(0, 0), 
        anchor: new google.maps.Point(17, 34), 
        scaledSize: new google.maps.Size(25, 25) 
       }; 

       var marker = new google.maps.Marker({ 
        map: map, 
        icon: image, 
        title: place.name, 
        position: place.geometry.location 
       }); 
       placesList.innerHTML += '<li>' + place.name + '<br>' + 
        (place.formatted_address ? place.formatted_address : place.vicinity) + '</li>'; 

       bounds.extend(place.geometry.location); 
       map.fitBounds(bounds); 

      } 
     } 
    }); 

    google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

你的地址是不是一個字符串，它是一個數字：

var address = 14235; 

的API預計"address" in the GeocoderRequest是一個字符串，它看起來像一個郵政地址。如果你希望它是一個字符串，用引號括起來（雖然我不知道你所期望的地理編碼器返回一個數字的）：

var address = "14235"; 

如果你給地理編碼器的東西，看起來更像一個完整的地址，它會工作得更好。

您對地理編碼器（FAQ）的異步性質也有問題，您不能返回異步函數的結果，您需要在回調函數中使用它。

Answer 2

你必須明白的是geocode API是異步的;在準備好之前，您正試圖將結果變量分配給pyrmont。爲了實現你想要的，你需要使用回調。另外，如何處理latLng歸因還有其他一些問題。無論如何，這裏是我認爲你的代碼應該看起來如何：

var map, geocoder; // global vars 

// retain your initialize function 
function initialize() { 
    map = new google.maps.Map(document.getElementById('map'), options); 
    geocoder = new google.maps.Geocoder(); 
} 

// but separate out your code into a new function that accepts an address 
// and a callback function. 
function getLatLng(address, callback) { 
    geocoder.geocode({ address: address }, function (results, status) { 
    if (status === google.maps.GeocoderStatus.OK) { 

     // assign a new Google latLng object to `location` 
     var location = new google.maps.LatLng(result.lat(), result.lng(); 

     // set the center of the map and position using the latlng object 
     map.setCenter(location); 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: location; 
     }); 

     // call the callback with the latlng object as a parameter. 
     callback(location); 
    } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
    } 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

// call the `getLatLng` function with an address and a callback function 
getLatLng('14235', function (latLngLocation) { 
    var pyrmont = latLngLocation; 
});