第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

Google Places API 下拉列表不顯示

Google Places API 下拉列表不顯示

慕蓋茨4494581 2023-09-14 18:08:08
我正在使用 Python Flask 和 Google Places API 來(lái)自動(dòng)完成地點(diǎn)。我希望我的網(wǎng)站自動(dòng)完成該位置,然后將其發(fā)送fetch到 Flask 服務(wù)器?,F(xiàn)在,我只想將位置記錄到控制臺(tái)。但是,當(dāng)我使用 Places API ( https://developers.google.com/places/web-service/autocomplete ) 實(shí)現(xiàn) API 時(shí),下拉列表甚至不顯示。這是我的代碼的相關(guān)片段:<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>任何幫助表示贊賞。先感謝您!編輯:我檢查了開(kāi)發(fā)工具并發(fā)現(xiàn)了 2 個(gè) JS 錯(cuò)誤:submit:1 Uncaught (in promise) le和Uncaught ReferenceError: geolocate is not defined at HTMLInputElement.onfocus (submit:76)
查看完整描述

1 回答

?
莫回?zé)o

TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊

看一下加載 Google Maps JavaScript API 的腳本:

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

請(qǐng)注意,它具有以下參數(shù)callback=initMap。這意味著一旦 Google Maps JavaScript API 完全加載,它將調(diào)用名為 name 的函數(shù)initMap()。

您的代碼中不存在此函數(shù)。您還有另一個(gè)名稱為 name 的函數(shù)initAutocomplete(),因此您應(yīng)該在回調(diào)參數(shù)中使用此函數(shù)名稱:

callback=initAutocomplete.

編輯:

此外,您沒(méi)有正確關(guān)閉標(biāo)簽。加載 Maps JavaScript API 的腳本必須以</script>標(biāo)簽結(jié)束,后面<script>跟著定義函數(shù)的代碼部分。查看可以解決您的問(wèn)題的代碼片段。

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


查看完整回答
反對(duì) 回復(fù) 2023-09-14
  • 1 回答
  • 0 關(guān)注
  • 128 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)