亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Google Places API 下拉列表不顯示

Google Places API 下拉列表不顯示

慕蓋茨4494581 2023-09-14 18:08:08
我正在使用 Python Flask 和 Google Places API 來自動完成地點。我希望我的網站自動完成該位置,然后將其發送fetch到 Flask 服務器?,F在,我只想將位置記錄到控制臺。但是,當我使用 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)
查看完整描述

1 回答

?
莫回無

TA貢獻1865條經驗 獲得超7個贊

看一下加載 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>


查看完整回答
反對 回復 2023-09-14
  • 1 回答
  • 0 關注
  • 133 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號