更改 Google 地图自动完成字段的值答案

【问题标题】：Change value of Google Maps Autocomplete field更改 Google 地图自动完成字段的值
【发布时间】：2014-03-06 16:59:25
【问题描述】：

更改值后如何更改 Google 地图自动填充字段的值？

我的最终愿望是仅在此字段中显示地址，并在单独的字段中显示城市、州等。

正如http://jsbin.com/wiye/2/ 所见（脚本在下面重复），我更改了值，但后来又变回了。

show just the street address in google.maps.event.addListener() 提出了同样的问题，但它似乎不再起作用。 Change the value in textbox of a google map autocomplete 也问了同样的问题，但没有足够的答案。

谢谢

<!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>

【问题讨论】：

stackoverflow.com/questions/21617795/… 的可能副本
@Dr.Molle 您认为这是该海报所说的“错误”，还是 Google 眼中的功能？
我认为它是一个不完整的实现。更改输入值的方法比键入更多（例如，以编程方式，但也例如剪切/粘贴或表单的重置方法），API 应考虑这些可能性。

标签： javascript jquery google-maps google-maps-api-3 google-maps-autocomplete

【解决方案1】：

我发现以编程方式更改自动完成输入值的最简单方法是重新初始化输入字段。

var input = document.getElementById(input_auto);
autocomplete = new google.maps.places.Autocomplete(input, option);

google.maps.event.addListener(autocomplete, 'place_changed', function() {
   // perform any functions based on place input
   ...
   // change the value of your autocomplete to whatever you want
   input.value = 'yyy';
   // reinitialize with new input value
   autocomplete = new google.maps.places.Autocomplete(input, option);
}

【讨论】：

我找到的最佳也是唯一的解决方案。

【解决方案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。

【讨论】：

【解决方案3】：

您正在使用许多不需要的事件。当用户从自动完成选项中选择地址时，自动完成会触发 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 索引是对象的唯一标识）。在您的情况下：街道号码 (street_number)、街道名称 (route)、城市 (locality)、县 (administrative_area_level_2)、州 (administrative_area_level_1)、国家 (country) 和邮政编码(postal_code)。

在此示例中，addrComponents 对象包含易于阅读的选项，用于匹配 place 数组中的项目。为了达到您想要的填充多个字段的结果，您只需要选择字段并将其内容设置为$inputName.val(desiredString)。

作为附加参考，Google Maps JavaScript API docs 包含您想要执行的操作的 an example。

希望对您有所帮助。祝你好运！

【讨论】：

我根本看不出这是如何回答问题的，我认为您误解了 OP 的要求。 OP 希望街道地址显示在初始自动完成字段中，而不是单独的字段中