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

  <input

    id="autocomplete"

    placeholder="Enter your address"

    onfocus="geolocate()"

    type="text"

  />

</div>

<script defer

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

</script>

<script>

  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>