仅使用Google地方API自动填充地名

Question

我已成功设置了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);
});

但它没有做任何事情。 请帮忙......

Answer 1

我现在意识到我完全误解了这个问题。我认为这是你想要消毒的下拉框的内容。要更改搜索框的内容，只需添加

即可

input.value=input.value.split(',')[0]; 

到您的place_changed活动 - ＆gt;的 http://jsfiddle.net/9RkM9/

---

这是谷歌地图在下拉框中组织结果（预测）的方式：

谷歌不会guarantee此结构在未来都会保持稳定，但事实上他们实际上记录了我们现在可以信任的标记结构样张。

典型的.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);
}

在此处查看此操作 - ＆gt;的 http://jsfiddle.net/8SGvR/

Answer 2

使用地址数组。它有碎片地址。只需要你需要的东西。

place.address_components

要查看此数组中的内容，请使用console：

console.log(place.address_components);

例如，更新输入值

$('#place_name').val(place.address_components[0].long_name);

Answer 3

const options = {
    componentRestrictions: { country: "az" },
    fields: ["geometry", "name"],
    origin: map.getCenter(),
    strictBounds: false,
    types: ["establishment"],
};

const input = document.getElementById('#txtHotels');
const autocompleteHotels = new google.maps.places.Autocomplete(input, options);

google.maps.event.addListener(autocompleteHotels, 'place_changed', function () {
    var near_place = autocompleteHotels.getPlace().name;
    input.value = near_place;
});