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>

ここで、ユーザーは通りを入力しますTextBox 。彼は相対的な結果を取得し、その後すべて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あり、値はグーグルプレイスの結果address_componentタイプの名前です。

このgeolocate関数は何の役にも立ちません
。 オートコンプリートの検索範囲を1つのlat/lng座標に設定しています。境界はlat/lngsのコレクションである必要があります。このフォームと同じページに地図を表示している場合は、次のように実行できます。

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 に答える