1 回答

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>
添加回答
舉報(bào)