Question

我在我的应用程序中使用Google商家信息自动填充文本框，效果很好。以下是谷歌的示例代码。 https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete

如果输入'Avenidas'，现在在文本框中它显示了像'Avenidas，Bryant Street，Palo Alto，CA，United States'这样的价值观。这也不错。但是当我选择这个值。地图上的标记显示地址 Avenidas，450 Bryant Street，Palo Alto，CA，美国

现在我的要求是，当用户选择该值时，它应该显示该值 Avenidas，450 Bryant Street Palo Alto，CA，United States in text box。

我试过

google.maps.event.addListener(autocomplete, 'place_changed', function() {}

并尝试使用以下代码行设置值。

input.value = place.name+', '+address;

但它并没有真正显示页面上的设定值。但在控制台日志中显示更改的值。我错过了什么？

以下是页码。添加了一个额外的文本框，其值设置正常。

    <!DOCTYPE html>
<html>
  <head>
    <title>Place Autocomplete</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      .controls {
        margin-top: 16px;
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      }

      #pac-input {
        background-color: #fff;
        padding: 0 11px 0 13px;
        width: 400px;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        text-overflow: ellipsis;
      }

      #pac-input:focus {
        border-color: #4d90fe;
        margin-left: -1px;
        padding-left: 14px;  /* Regular padding-left + 1. */
        width: 401px;
      }

      .pac-container {
        font-family: Roboto;
      }

      #type-selector {
        color: #fff;
        background-color: #4d90fe;
        padding: 5px 11px 0px 11px;
      }

      #type-selector label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }
}

    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

    <script>
function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(-33.8688, 151.2195),
    zoom: 13
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var input = /** @type {HTMLInputElement} */(
      document.getElementById('pac-input'));

  var autocomplete = new google.maps.places.Autocomplete(input);
  //autocomplete.bindTo('bounds', map);

  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    var address = '';
    if (place.address_components) {
      address = [
        (place.address_components[0] && place.address_components[0].short_name || ''),
        (place.address_components[1] && place.address_components[1].short_name || ''),
        (place.address_components[2] && place.address_components[2].short_name || '')
      ].join(' ');
    }

    document.getElementById("displayAddress").value=place.name+', '+address;
    document.getElementById("pac-input").value=place.name+', '+address;

    //console.log(input.text);
  });


}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
  <input id="displayAddress" type="text">
    <input id="pac-input" class="controls" type="text"
        placeholder="Enter a location">

    <div id="map-canvas"></div>
  </body>
</html>

如何替换Google自动填充文本框的文本值

0 个答案: