仅使用Google Places API完成地点名称 [英] Autocompleting only the place name with Google places API

问题描述

我已经成功安装了Google Places API的自动填充功能。

  var input = document.getElementById（'place_name'）; 
 var autocomplete = new google.maps.places.Autocomplete（input）; 
  

但是，自动填充文本框 place_name 一些街道，华盛顿州，华盛顿州，美国
但是我想只填写文本框的地名，例如在我的情况下 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 事件 - > 这个结构在将来是稳定的，但事实上他们实际上记录了我们可以信任的标记结构证明现在。

典型的 .pac-item 将看起来像这样，在这里搜索Los：

 < div class =pac-item> 
< span class =pac-item-query>< span class =pac-matched> Los< / span> 
 Altos< / span>< span> CA，美国< / span> 
< / div> 
  

这里与 CA 和美国现在，你想避免。该任务只是减少 .pac-item 节点的内容，所以我们只保留所谓的预测的名称。自动完成搜索每次用户点击一个密钥时，您可以自行排除自动生成的预测列表输入 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]; 
 //获取图标
 var pac_icon = place.querySelector（'。pac-icon' ）.outerHTML; 
 //仅获取匹配的名称，包括用于精确匹配的标记，以粗体取消Los
 var place_name_reduced = place.querySelector（'。pac-item-query'）。outerHTML ; 
 place.innerHTML = pac_icon + place_name_reduced; 
} 
}，150）; 
} 
  

在这里看到它 - > http://jsfiddle.net/8SGvR/

I have successfully setup autocomplete of Google Places API with

var input = document.getElementById('place_name');
var autocomplete = new google.maps.places.Autocomplete(input);

But that automatically fills the textbox place_name with full address like "ABC, Some Street, Washington, WA, United States" But I want to fill the textbox with only the place name e.g. ABC in my case. How I can do that?

I tried

google.maps.event.addListener(autocomplete, 'place_changed', function () {
    var place = autocomplete.getPlace();

    $('#place_name').val(place.name);
});

but it didn't do anything. Help please...

解决方案

I now realize I completely misinterpreted the question. I thought it was the content of the dropdown box you wanted to sanitize. To change content of the searchbox, just add

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

to your place_changed event -> http://jsfiddle.net/9RkM9/

---

This is how google maps places organizes the results (predictions) in the dropdown box :

Google does not guarantee this structure to be stable in all future, but the fact they actually document the markup structure proofs we can trust it for now.

A typical .pac-item will look like this, here searching for "Los" :

<div class="pac-item">
    <span class="pac-item-query"><span class="pac-matched">Los</span>
    Altos</span><span>CA, United States</span>
</div>

Here with CA and United States present, which you want to avoid. The task is simply to reduce the content of the .pac-item node, so we only keep the name part of the socalled prediction. The autocomplete searches each and every time the user hits a key, so you can overrule the autogenerated list of predictions on your own input keyup event. There need to be a little delay, so we actually access the newest list of predictions, not the previous one :

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

See it in action here -> http://jsfiddle.net/8SGvR/

这篇关于仅使用Google Places API完成地点名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！