Google 地点 API 下拉菜单未显示

Question

我正在使用 Python Flask with 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 地图的脚本 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.

编辑：

此外，您没有正确关闭标签。加载地图 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>

希望这能解决您的问题。

Google 地点 API 下拉菜单未显示

Google Places API Dropdown does not show up

javascript

google-maps

google-places-api

google-places

googleplacesautocomplete