我已经使用
成功设置了 Google Places API 的自动完成功能var input = document.getElementById('place_name');
var autocomplete = new google.maps.places.Autocomplete(input);
但这会自动用完整地址填充文本框 place_name,例如“ABC, Some Street, Washington, WA, United States” 但我只想用地名填充文本框,例如ABC 就我而言。 我该怎么做?
我试过了
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
$('#place_name').val(place.name);
});
但它什么也没做。 请帮助...
最佳答案
我现在意识到我完全误解了这个问题。我认为这是您要清理的下拉框的内容。要更改搜索框的内容,只需添加
input.value=input.value.split(',')[0];
到您的 place_changed
事件 -> http://jsfiddle.net/9RkM9/
这是谷歌地图在下拉框中组织结果(预测)的方式:
Google 不 guarantee这种结构在所有 future 都是稳定的,但他们实际记录标记结构的事实证明我们现在可以信任它。
典型的 .pac-item
看起来像这样,在这里搜索“Los”:
<div class="pac-item">
<span class="pac-item-query"><span class="pac-matched">Los</span>
Altos</span><span>CA, United States</span>
</div>
这里有 CA
和 United States
,您要避免。任务只是减少.pac-item
节点的内容,所以我们只保留所谓的预测的名称部分。每次用户按下一个键时,自动完成都会搜索,因此您可以在您自己的 input
keyup
事件中否决自动生成的预测列表。需要有一点延迟,所以我们实际上访问的是最新的预测列表,而不是之前的:
input.onkeyup = function(e) {
setTimeout(function() {
var places = document.querySelectorAll('.pac-item');
for (var i=0;i<places.length;i++) {
var place = places[i];
//get the icon
var pac_icon = place.querySelector('.pac-icon').outerHTML;
//get the mathed name only, including markup for precise match, loke "Los" in bold
var place_name_reduced = place.querySelector('.pac-item-query').outerHTML;
place.innerHTML = pac_icon + place_name_reduced;
}
}, 150);
}
在此处查看实际效果 -> http://jsfiddle.net/8SGvR/
关于javascript - 使用 Google places API 仅自动完成地名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22282958/