Google Places API 下拉菜单未显示

Question

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

<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，它将调用名称为 initMap() 的函数。

您的代码中不存在此函数。你还有一个名为initAutocomplete()的函数，所以你应该在回调参数中使用这个函数名：

callback=initAutocomplete.

编辑：

此外，您没有正确关闭标签。加载 Maps JavaScript API 的脚本必须使用 </script> 标记关闭，然后是 <script> 用于定义您的函数的代码部分。 查看解决问题的代码 sn-p。

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

希望这能解决您的问题。