如何獲得來自谷歌地圖的自動填充API的郵政編碼

Question

所以我的問題是，在將結果作爲吐出：

1980年團街，舊金山，CA，美國

...但我需要它給我的郵政編碼，因爲當我把它放回谷歌的Geocoder，出於某種原因，它不註冊的位置。

//這是代碼我剛纔的自動完成輸入字段

var input = document.getElementById('id_address'); 
var options = { 
    types: ['address'], 
    componentRestrictions: {country:'us'} 
}; 
autocomplete = new google.maps.places.Autocomplete(input, options); 

//這是我如何使用地理編碼

window.onload = function initMap() { 
      console.log("{{ task.address }}"); 
      console.log("{{ location }}"); 
      var address = "{{ location }}"; 

      geocoder = new google.maps.Geocoder(); 

      geocoder.geocode({ 'address': address }, function(results, status) { 
       <!-- console.log(address); --> 
       if (status == google.maps.GeocoderStatus.OK) { 
       var map = new google.maps.Map(document.getElementById('map'), { 
        center: results[0].geometry.location, 
        zoom: 12, 
        }); 
       var marker = new google.maps.Marker({ 
        map: map, 
        position: results[0].geometry.location, 
        }); 
       } 


      }); 

     } 

我有一個有效的解決方案，但用戶將不得不分別輸入每個地址。我試圖改變它，以便他們可以只填寫一個輸入字段，然後我可以將該地址吐入gecoder.geocode（）。

任何意見是非常感謝。謝謝。

Answer 1

由autocomplete返回的result包含的具有類型「POSTAL_CODE」，這爲您的樣品地址（「1980年團街，舊金山，CA，美國」），包含94103的address_components陣列，一個條目。

proof of concept fiddle

function initialize() { 
 
    var input = document.getElementById('id_address'); 
 
    var options = { 
 
    types: ['address'], 
 
    componentRestrictions: { 
 
     country: 'us' 
 
    } 
 
    }; 
 
    autocomplete = new google.maps.places.Autocomplete(input, options); 
 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
 
    var place = autocomplete.getPlace(); 
 
    for (var i = 0; i < place.address_components.length; i++) { 
 
     for (var j = 0; j < place.address_components[i].types.length; j++) { 
 
     if (place.address_components[i].types[j] == "postal_code") { 
 
      document.getElementById('postal_code').innerHTML = place.address_components[i].long_name; 
 

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

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<input id="id_address" type="text" size="100" value="1980 Mission Street, San Francisco, CA, United States" />zip code: 
 
<div id="postal_code"></div> 
 
<div id="map_canvas"></div>

Answer 2

如果您使用的是Google地圖地理編碼API，則Result的address_components陣列包含postal_code。您只需要指定類型爲postal_code。

Answer 3

function initialize() { 
 
    var input = document.getElementById('id_address'); 
 
    var options = { 
 
    types: ['address'], 
 
    componentRestrictions: { 
 
     country: 'us' 
 
    } 
 
    }; 
 
    autocomplete = new google.maps.places.Autocomplete(input, options); 
 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
 
    var place = autocomplete.getPlace(); 
 
    for (var i = 0; i < place.address_components.length; i++) { 
 
     for (var j = 0; j < place.address_components[i].types.length; j++) { 
 
     if (place.address_components[i].types[j] == "postal_code") { 
 
      document.getElementById('postal_code').innerHTML = place.address_components[i].long_name; 
 

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

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<input id="id_address" type="text" size="100" value="1980 Mission Street, San Francisco, CA, United States" />zip code: 
 
<div id="postal_code"></div> 
 
<div id="map_canvas"></div>