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

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 网络开发者网站的代码。

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>

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

Autocomplete places search not working

javascript

api

dictionary

google-maps-api-3