如何填充来自 Google Geocoding API 的 TextBox 返回

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>

在这里，用户将输入 street 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，值是google places 结果address_component 类型的名称。

geolocate 函数没有任何用处
您将自动完成搜索范围设置为 one lat/lng 坐标。边界应该是纬度/经度的集合。如果您在与此表单相同的页面上显示地图，则可以执行以下操作。

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