我有一個表格,可以從用戶收集位置信息。我使用Google放置api來自動完成位置信息。它效果很好。儘管有一些地方(例如我的工作場所是建築物),但一切都很好,但Google不會爲此返回郵政編碼。谷歌放置API不返回一些地方的郵政編碼
我跟着這個example來自Google地址自動填充。它也不會爲我的工作單位返回郵政編碼。所以我不完全確定我做錯了什麼。
下面是我的代碼:
HTML
<div id="location-autocomplete" style="display: none;">
<div class="half-formfield">
@Html.LabelFor(x => x.Address)
@Html.TextBoxFor(x => x.Address, new { @class = "two-third-field", id = "street_number", required = "required" })
</div>
<div>
@Html.LabelFor(x => x.UnitNumber, new { value = "Unit Number" })
@Html.TextBoxFor(x => x.UnitNumber, new { @class = "one-third-field" })
</div>
<div class="half-formfield">
@Html.LabelFor(x => x.City)
@Html.TextBoxFor(x => x.City, new { @class = "half-field", required = "required", id = "locality" })
</div>
<div>
@Html.LabelFor(x => x.ProvinceOrState)
@Html.TextBoxFor(x => x.ProvinceOrState, new { @class = "half-field", required = "required", id = "administrative_area_level_1" })
</div>
<div class="half-formfield">
@Html.LabelFor(x => x.ZipOrPostalCode)
@Html.TextBoxFor(x => x.ZipOrPostalCode, new { @class = "half-field", required = "required", id = "postal_code" })
</div>
<div>
@Html.LabelFor(x => x.Country)
@Html.TextBoxFor(x => x.Country, new { @class = "half-field", required = "required", id = "country" })
</div>
<input type="button" value="Clear Address" onclick="clearAddress()" id="clear-btn" class="service-form-btn"/>
JS
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function initialize() {
// Create the autocomplete object, restricting the search
// to geographical location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
{ types: ['geocode'] });
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
showAddressComponent();
setTimeout(hideAddressSearch, 800);
});
}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
if (component != "route") {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
console.log(val);
if (addressType != "route") document.getElementById(addressType).value = val;
else if (addressType == "route") document.getElementById("street_number").value = document.getElementById("street_number").value + " " + val;
}
}
}
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
geolocation));
});
}
}
截圖
我不知道這是一個錯誤或者乾脆谷歌不知道建築物的郵政編碼。在那種情況下,是否有任何解決此問題的方法?
在此先感謝。
谷歌自己的例子沒有找到該地址的郵政編碼。所以這與您粘貼的樣板代碼的牆壁無關。這聽起來像是一個向谷歌提出的問題。 – bzlm 2014-11-21 23:22:26