Google 地方信息自动完成功能不起作用答案

【问题标题】：Google Places AutoComplete Not workingGoogle 地方信息自动完成功能不起作用
【发布时间】：2018-01-19 12:14:50
【问题描述】：

我有一个自动完整的搜索栏，用于搜索带有 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 时，第二个只能工作。我希望两个输入都有谷歌自动完成地址。

【问题讨论】：

标签： javascript forms google-places-api

【解决方案1】：

需要分别注册两个文本框

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()));

【讨论】：