Question

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQ7XPD_fZf8YCv-1gEE_Yid3xzFaEy7DU&libraries=places" async defer></script>

<script type="text/javascript">
      var defaultBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(-33.8902, 151.1759),
      new google.maps.LatLng(-33.8474, 151.2631));

      var input = document.getElementById('searchbox');
      var options = {
       bounds: defaultBounds,
       types: ['establishment']
    };

     autocomplete = new google.maps.places.Autocomplete(input, options);
</script>

<div class="col-md-6">
<form>
  <div class="form-group">
    <label for="PickUp">Pick Up location</label>
    <input type="text" id="searchbox" class="form-control" placeholder="Search...">
  </div>

当我在文本框中输入内容时，没有任何反应。这段代码出了什么问题？上面的代码引用了Google Web开发者网站上的代码。

Answer 1

您在脚本src网址中缺少&callback=init。并将所有脚本代码放在function init(){...}

中

＆＃13;

function init() {
  var defaultBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(-33.8902, 151.1759),
    new google.maps.LatLng(-33.8474, 151.2631));

  var input = document.getElementById('searchbox');
  var options = {
    bounds: defaultBounds,
    types: ['establishment']
  };

  autocomplete = new google.maps.places.Autocomplete(input, options);
}

＆＃13;

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQ7XPD_fZf8YCv-1gEE_Yid3xzFaEy7DU&libraries=places&callback=init" async defer></script>

<div class="col-md-6">
  <form>
    <div class="form-group">
      <label for="PickUp">Pick Up location</label>
      <input type="text" id="searchbox" class="form-control" placeholder="Search...">
    </div>
  </form>
</div>

＆＃13;

自动填充位置搜索无法正常工作

1 个答案: