jQuery 和谷歌地图自动完成

我的 Google 地图自动完成功能适用于多个项目input像这样的标签：

 <input class="controls pac-input" id="pac-input" type="text" onfocus="geolocate()" placeholder="Type custom address" />

为了启用 Google 地图自动完成功能，我有以下代码：

//https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
$(document).ready(function () {

    autocomplete = new google.maps.places.Autocomplete((document.getElementById('pac-input')), { types: ['geocode'] });

    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        MyFunc();
    });

});

然后，在MyFunc()功能我做我需要的：

function MyFunc() {
    var fullAddress = autocomplete.getPlace().formatted_address;
    var input = $(this);
    //stuff that uses input
}

然而，这段代码有两个问题：

• 第一个是我使用 Id 来影响多个输入框（我有很多输入字段）。我尝试按类别选择，但失败并出现错误“未定义”。如何将该函数应用于输入字段的集合？
• 我如何知道哪个字段被单击？我尝试使用 jquery$(this)但它不起作用。 jQuery 如何帮助我？

提前致谢！

你不needjQuery 就是为了这个。这是一个仅使用 javascript 的工作示例：

HTML:

<input class="autocomplete" id="ac1" placeholder="Enter your address" type="text"></input>
<input class="autocomplete" id="ac2" placeholder="Enter your address" type="text"></input>
<input class="autocomplete" id="ac3" placeholder="Enter your address" type="text"></input>

JavaScript：

var acInputs = document.getElementsByClassName("autocomplete");

for (var i = 0; i < acInputs.length; i++) {

    var autocomplete = new google.maps.places.Autocomplete(acInputs[i]);
    autocomplete.inputId = acInputs[i].id;

    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        console.log('You used input with id ' + this.inputId);
    });
}

JSFiddle demo

如果你想用 jQuery 来实现，你可以尝试这样：

$('.autocomplete').each(function() {
    
    var autocomplete = new google.maps.places.Autocomplete($(this)[0]);
    autocomplete.inputId = $(this).attr('id');

    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        console.log('You used input with id ' + this.inputId);
    });
});

JSFiddle demo

希望这可以帮助。