9

値が変更された後、Google マップのオートコンプリート フィールドの値を変更するにはどうすればよいですか?

私の究極の願いは、このフィールドに住所を表示し、市、州などを別のフィールドに表示することです。

http://jsbin.com/wiye/2/ (以下にスクリプトを複製) で見られるように、値を変更しますが、後で元に戻ります。

show just the street address in google.maps.event.addListener()は同じ質問をしますが、もはや機能していないようです。 Google マップのオートコンプリートのテキスト ボックスの値を変更すると、同じ質問が表示されますが、適切な回答がありません。

ありがとうございました

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Places search box</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
        <script>
            $(function(){
                var input_auto = document.getElementById('input_auto');
                autocomplete = new google.maps.places.Autocomplete(input_auto,{types: ['geocode'],radius: 10});
                google.maps.event.addListener(autocomplete, 'place_changed', function() {
                    setTimeout(function(){$('#input_auto').val('yyy');},50);
                    alert('pause1');
                    console.log(autocomplete,input_auto);
                    input_auto.value='xxx';
                    //autocomplete.set('xxx');
                    //autocomplete.setValues('xxx');
                    alert('pause2');
                });
            });

        </script>
    </head>
    <body>
        <input id="input_auto" type="text">
    </body>
</html>
4

3 に答える 3

1

必要のない多くのイベントを使用しています。ユーザーがオートコンプリート オプションから住所を選択すると、オートコンプリートによってplace_changedイベントが発生します。そのイベントが発生すると、オートコンプリートは関連付けられているフィールドにデータを入力します。

これは、「このフィールドに住所を表示し、別のフィールドに都市、州などを表示する」ことを可能にする、問題に対するより適切に構造化された回答です。

(function() {

  var $inputAuto = $('#input_auto');

  var addrComponents = {
    streetNumber: {
      display: 'short_name',
      type: 'street_number'
    },
    streetName: {
      display: 'long_name',
      type: 'route'
    },
    cityName: {
      display: 'long_name',
      type: 'locality'
    },
    stateName: {
      display: 'short_name',
      type: 'administrative_area_level_1'
    },
    zipCode: {
      display: 'short_name',
      type: 'postal_code'
    }
  };

  var autocomplete;
  var autocompleteOptions = {
    radius: 10,
    types: ['geocode']
  };


  function initAutocomplete() {
    autocomplete = new google.maps.places.Autocomplete($inputAuto[0], autocompleteOptions);
    autocomplete.addListener('place_changed', setAddress);
  };

  function setAddress() {
    var place = autocomplete.getPlace().address_components;

    var streetAddr = [addrComponents.streetNumber, addrComponents.streetName];
    var streetAddrDisplay = [];

    // Add additional field values

    place.forEach(function(placeComponent) {
      streetAddr.forEach(function(streetAddrComponent) {
        if (placeComponent.types[0] === streetAddrComponent.type) {
          streetAddrDisplay.push(placeComponent[streetAddrComponent.display]);
        }
        // else if <additional field values>
      });
    });
    var addrString = streetAddrDisplay.join(' ');
    $inputAuto.val(addrString);
  };

  initAutocomplete();

}());

autocomplete.getPlace()他の Maps API 呼び出しに使用できる一連のものを含むオブジェクトを返します。ただし、その中の最初のオブジェクトが必要なだけですaddress_components。これは、一致した住所コンポーネント オブジェクトの配列です。これらの各オブジェクトには、入力を設定するために使用する と がありますlong_name。short_name各オブジェクトにはtypes、文字列が何を表すかを示す の配列も含まれます (0 インデックスはオブジェクトの一意の ID です)。あなたの場合: 番地 ( street_number)、通りの名前 ( route)、都市 ( locality)、郡 ( administrative_area_level_2)、州 ( administrative_area_level_1)、国 ( country)、および郵便番号 ( postal_code)。

この例では、オブジェクトには、配列addrComponents内の項目を照合するための読みやすいオプションが含まれています。place複数のフィールドにデータを入力して目的の結果を得るには、フィールドを選択して でその内容を設定するだけです$inputName.val(desiredString)。

追加のリファレンスとして、Google Maps JavaScript API ドキュメントには、まさにあなたがやりたいことの例が含まれています。

それが役立つことを願っています。幸運を！

于 2016-02-19T17:21:42.807 に答える
-2

これは、イベント リスナーblurとkeydownイベントを追加して自動値をオーバーライドすることで修正できます。以下で私がしたことをチェックしてください：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Places search box</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <script>
      $(function(){
        var input_auto = document.getElementById('input_auto');
        autocomplete = new google.maps.places.Autocomplete(input_auto,{types: ['geocode'],radius: 10});
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
          input_auto.addEventListener('blur', function() {
            input_auto.value = 'yyy';
          });
          input_auto.addEventListener('keydown', function() {
            input_auto.value = 'yyy';
          });
          setTimeout(function(){$('#input_auto').val('yyy');},1);
        });
      });

    </script>
  </head>
  <body>
    <input id="input_auto" type="text">
  </body>
</html>

問題が発生した場合は、必要に応じて setTimeouts を追加できます。

于 2014-05-23T18:23:23.290 に答える