2014-11-21 69 views
2

我有一個表格,可以從用戶收集位置信息。我使用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)); 
     }); 
    } 
} 

截圖

enter image description here

我不知道這是一個錯誤或者乾脆谷歌不知道建築物的郵政編碼。在那種情況下,是否有任何解決此問題的方法?

在此先感謝。

+4

谷歌自己的例子沒有找到該地址的郵政編碼。所以這與您粘貼的樣板代碼的牆壁無關。這聽起來像是一個向谷歌提出的問題。 – bzlm 2014-11-21 23:22:26

回答

0

這個地址有一個郵編,但只有一部分(我想它被稱爲FSA代碼)。

的功能並沒有認識到這一點的一部分,因爲該地址的返回類型數組是:

["postal_code_prefix", "postal_code"] 

...但功能只檢查類型數組的第一個項目。

可能的解決辦法:

function fillInAddress() { 
    // Get the place details from the autocomplete object. 
    var place = autocomplete.getPlace(); 

    for (var component in componentForm) { 
    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 addressTypes = place.address_components[i].types,addressType,val; 
    for(var j=0;j<addressTypes.length;++j){ 

     addressType=addressTypes[j]; 

     if (componentForm[addressType]) { 
     val = place.address_components[i][componentForm[addressType]]; 
     document.getElementById(addressType).value = val; 
     break; 
     } 
    } 

    } 
} 
+0

它仍然無法正常工作。你從中得到了什麼FSA代碼? V7X? – TheBokiya 2014-11-25 16:47:51

+0

是的,'V7X',http://jsfiddle.net/doktormolle/9bLcu2cd/ – 2014-11-25 21:06:43

+0

這實際上並不是建築物正確的FSA代碼。如果您在Google地圖上查找地址,Google地圖也會簡單地提供該代碼。 – TheBokiya 2014-11-25 23:08:01

0
var location = place.geometry.location; 
var lat = location.lat(); 
var lng = location.lng(); 


var latlng = {lat: lat, lng: lng}; 
      geocoder.geocode({'location': latlng}, function(results, status) { 
         if (status == google.maps.GeocoderStatus.OK) { 

          if (results[0]) { 

          for (var i = 0; i < results[0].address_components.length; i++) { 
           var types = results[0].address_components[i].types; 

           for (var typeIdx = 0; typeIdx < types.length; typeIdx++) { 
            if (types[typeIdx] == 'postal_code') { 
             //console.log(results[0].address_components[i].long_name); 

             var pincode = results[0].address_components[i].short_name; 
             alert('pin'+pincode); 

            } 
           } 
          } 

          $('#pac-input2').val(results[0].formatted_address); 
          infowindow.setContent(results[0].formatted_address); 
          //infowindow.open(map, marker); 
          } 
         } 

      }); 
+0

歡迎來到Stack Overflow!雖然這段代碼可能會回答這個問題,但爲什麼和/或代碼如何回答這個問題提供了額外的背景,這提高了它的長期價值。不提供任何代碼的答案是不鼓勵的。 – Ajean 2016-07-07 00:00:50

相關問題