2

我想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>

在这里，用户将输入 streetTextBox 他将获得相关结果并选择之后将全部TextBox 填充。

4

1 回答 1

3

好的，您的代码存在一些问题。

我为你做了一个工作演示。

我确实使用 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'

};

数组键是 的id，textbox值是 google places 结果address_component类型的名称。

该geolocate功能没有做任何有用
的事情 您正在将自动完成搜索范围设置为一个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);
        }
    }
}
于 2013-01-15T15:55:24.473 回答