自动完成地点搜索不起作用

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 developer site的代码。

Answer 1

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

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);
}

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