Google Places API 下拉列表不显示

Question

我正在使用 Python Flask 和 Google Places API 来自动完成地点。我希望我的网站自动完成该位置，然后将其发送fetch到 Flask 服务器。现在，我只想将位置记录到控制台。但是，当我使用 Places API ( https://developers.google.com/places/web-service/autocomplete ) 实现 API 时，下拉列表甚至不显示。这是我的代码的相关片段：

<div id="locationField">

  <input

    id="autocomplete"

    placeholder="Enter your address"

    onfocus="geolocate()"

    type="text"

  />

</div>

<script defer

    src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places&callback=initMap">

  let placeSearch;

  let autocomplete;

  function initAutocomplete() {

    // Create the autocomplete object, restricting the search predictions to

    // geographical location types.

    autocomplete = new google.maps.places.Autocomplete(

      document.getElementById("autocomplete"),

      { types: ["geocode"] }

    );

    // Avoid paying for data that you don't need by restricting the set of

    // place fields that are returned to just the address components.

    autocomplete.setFields(["address_component"]);

    // When the user selects an address from the drop-down, populate the

    // address fields in the form.

    autocomplete.addListener("place_changed", getAddress);

  }

  

  function getAddress() {

    console.log(autocomplete.getPlace());

  }

  

  function geolocate() {

  if (navigator.geolocation) {

    navigator.geolocation.getCurrentPosition((position) => {

      const geolocation = {

        lat: position.coords.latitude,

        lng: position.coords.longitude,

      };

      const circle = new google.maps.Circle({

        center: geolocation,

        radius: position.coords.accuracy,

      });

      autocomplete.setBounds(circle.getBounds());

    });

  }

}

</script>

任何帮助表示赞赏。先感谢您！

编辑：我检查了开发工具并发现了 2 个 JS 错误：submit:1 Uncaught (in promise) le和Uncaught ReferenceError: geolocate is not defined at HTMLInputElement.onfocus (submit:76)

Answer 1

看一下加载 Google Maps JavaScript API 的脚本：<script&nbsp;defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places&callback=initMap">请注意，它具有以下参数callback=initMap。这意味着一旦 Google Maps JavaScript API 完全加载，它将调用名为 name 的函数initMap()。您的代码中不存在此函数。您还有另一个名称为 name 的函数initAutocomplete()，因此您应该在回调参数中使用此函数名称：callback=initAutocomplete.编辑：此外，您没有正确关闭标签。加载 Maps JavaScript API 的脚本必须以</script>标签结束，后面<script>跟着定义函数的代码部分。查看可以解决您的问题的代码片段。<div id="locationField">&nbsp; <input&nbsp; &nbsp; id="autocomplete"&nbsp; &nbsp; placeholder="Enter your address"&nbsp; &nbsp; onfocus="geolocate()"&nbsp; &nbsp; type="text"&nbsp; /></div><script defer&nbsp; &nbsp; src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&libraries=places&callback=initAutocomplete"></script><script>&nbsp; let placeSearch;&nbsp; let autocomplete;&nbsp; function initAutocomplete() {&nbsp; &nbsp; // Create the autocomplete object, restricting the search predictions to&nbsp; &nbsp; // geographical location types.&nbsp; &nbsp; autocomplete = new google.maps.places.Autocomplete(&nbsp; &nbsp; &nbsp; document.getElementById("autocomplete"),&nbsp; &nbsp; &nbsp; { types: ["geocode"] }&nbsp; &nbsp; );&nbsp; &nbsp; // Avoid paying for data that you don't need by restricting the set of&nbsp; &nbsp; // place fields that are returned to just the address components.&nbsp; &nbsp; autocomplete.setFields(["address_component"]);&nbsp; &nbsp; // When the user selects an address from the drop-down, populate the&nbsp; &nbsp; // address fields in the form.&nbsp; &nbsp; autocomplete.addListener("place_changed", getAddress);&nbsp; }&nbsp;&nbsp;&nbsp; function getAddress() {&nbsp; &nbsp; console.log(autocomplete.getPlace());&nbsp; }&nbsp;&nbsp;&nbsp; function geolocate() {&nbsp; if (navigator.geolocation) {&nbsp; &nbsp; navigator.geolocation.getCurrentPosition((position) => {&nbsp; &nbsp; &nbsp; const geolocation = {&nbsp; &nbsp; &nbsp; &nbsp; lat: position.coords.latitude,&nbsp; &nbsp; &nbsp; &nbsp; lng: position.coords.longitude,&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; const circle = new google.maps.Circle({&nbsp; &nbsp; &nbsp; &nbsp; center: geolocation,&nbsp; &nbsp; &nbsp; &nbsp; radius: position.coords.accuracy,&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; autocomplete.setBounds(circle.getBounds());&nbsp; &nbsp; });&nbsp; }}</script>