我有一个自动完成搜索栏,用于搜索带有 Google 地点的地址。问题是,它一次只出现在一个字段上。
我的 HTML
<input type="text" id="google" name="pick" placeholder="Pick up location" required/>
<input type="text" id="google" name="drop" placeholder="Drop off location" required/>
<script src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&libraries=places"></script>
脚本
const options = {
types: ['address'],
componentRestrictions: {
country: 'sg'
}
};
let autocomplete = new google.maps.places.Autocomplete(document.getElementById('google'), options);
autocomplete.addListener('place_changed', () => console.log(autocomplete.getPlace()));
第一个输入有效,第二个无效。当我更改第一个输入的 ID 时,第二个输入才起作用。我希望两个输入都有谷歌自动完成地址。
最佳答案
您需要分别注册两个文本框
HTML
<input type="text" id="google1" name="pick" placeholder="Pick up location" required/>
<input type="text" id="google2" name="drop" placeholder="Drop off location" required/>
Javascript
const options = {
types: ['address'],
componentRestrictions: {
country: 'sg'
}
};
let autocomplete1 = new google.maps.places.Autocomplete(document.getElementById('google1'), options);
autocomplete1.addListener('place_changed', () => console.log(autocomplete1.getPlace()));
let autocomplete2 = new google.maps.places.Autocomplete(document.getElementById('google2'), options);
autocomplete2.addListener('place_changed', () => console.log(autocomplete2.getPlace()));
关于javascript - Google 地方信息自动完成功能不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48333952/