如何填寫TextBox返回來自Google地理編碼API

Question

我想在我的TextBox中實現功能，其中用戶將輸入一些地址，並從Google API返回地址，該用戶將選擇正確的地址。他會選擇我的街道，郵編，國家，城市的地址都會自動填寫。

我想這一點，但沒有獲得成功（我的aspx頁面的小部分）

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script> 


<script type="text/javascript"> 

    var placeSearch,autocomplete; 
    var component_form = { 
    'route': 'short_name', 
    'route': 'long_name', 
    'locality': 'long_name', 
    'administrative_area_level_1': 'short_name', 
    'country': 'long_name', 
    'postal_code': 'postal_code' 
    }; 

    function initialize() { 
    autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), { types: [ 'geocode' ] }); 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     fillInAddress(); 
    }); 
    } 

    function fillInAddress() { 
    var place = autocomplete.getPlace(); 

    for (var component in component_form) { 
     document.getElementById(component).value = ""; 
     document.getElementById(component).disabled = false; 
    } 

    for (var j = 0; j < place.address_components.length; j++) { 
     var att = place.address_components[j].types[0]; 
     if (component_form[att]) { 
     var val = place.address_components[j][component_form[att]]; 
     document.getElementById(att).value = val; 
     } 
    } 
    } 

    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)); 
     }); 
    } 
    } 
</script> 

我的.aspx頁面中是這樣

<div onload="initialize();"> 

<asp:UpdatePanel ID="UpdatePanelTabContainer" runat="server"> 
     <ContentTemplate> 
     <table width="100%"> 
     <tr> 
      <td> 
       street 
      </td> 
      <td> 
       <asp:TextBox ID="txtPickupStreet" runat="server" MaxLength="100" Width="162px" placeholder="Enter your address" AutoPostBack="true" onFocus="javascript:geolocate()"></asp:TextBox> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       Postal Code 
      </td> 
      <td> 
       <asp:TextBox ID="txtPickupPC" runat="server" MaxLength="11" Width="90px" /> 
      </td> 
     </tr> 

      </table> 
    </ContentTemplate> 
      </asp:UpdatePanel> 

這裏用戶將輸入街道TextBox他會得到相對的結果，然後選擇全部TextBox將被填充。

Answer 1

好吧，你的代碼有幾個問題。我爲你製作了一個working demo。

我沒有使用jQuery作爲我的補充，但我相信如果您不使用jQuery，可以替換它。

component_form對象是錯誤
它應該是這樣的

var component_form = { 
'txtPickupUnitNumber': 'subpremise', 
'txtPickupStreetNumber': 'street_number', 
'txtPickupStreetName': 'route', 
'txtPickupSuburb': 'locality', 
'txtPickupPC': 'postal_code', 
'txtPickupState': 'administrative_area_level_1', 
'txtPickupCountry': 'country' 

};

數組鍵是textbox的id，該值是谷歌地名結果address_component類型的名稱。

的geolocate功能沒有做什麼有用的
要設置自動完成搜索邊界向一個緯度/經度座標。邊界應該是經緯度的集合。如果您在此表單的同一頁面上顯示地圖，則可以執行以下操作。

function geolocate() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
      // set the map to the user locations 
      map.setCenter(new google.maps.LatLng(position.coords.latitude,position.coords.longitude)); 
      // use the viewport as the search bounds 
      autocomplete.setBounds(map.getBounds())); 
     }); 
    } 
} 

的fillInAddress功能需要改變，以應對新component_form陣列。

function fillInAddress() { 
    var place = autocomplete.getPlace(); 
    // if you use jQuery then you can delete this and just set the attr to true in the fillFormInput function 
    for (var component in component_form) { 
     document.getElementById(component).value = ""; 
     document.getElementById(component).disabled = false; 
    } 

    for (var j = 0; j < place.address_components.length; j++) { 
     var att = place.address_components[j].types[0]; 
     fillFormInput(att, place.address_components[j].long_name); 
    } 
} 

// This new function searchs for the textbox that corresponds to the address_component type name 
function fillFormInput(att, val) { 
    for (var c in component_form) { 
     if (component_form[c] === att) { 
      $('#'+c).val(val); 
     } 
    } 
}