Javascript 除'以外的事件;地点已更改';谷歌地图自动完成

Javascript 除'以外的事件;地点已更改';谷歌地图自动完成,javascript,jquery,google-maps,google-maps-api-3,autocomplete,Javascript,Jquery,Google Maps,Google Maps Api 3,Autocomplete,我有一个应用程序,当前可以在更改位置时正确启动 但是,我希望分支搜索在用户选择自动完成条目和用户在没有自动完成帮助的情况下自己输入文本时表现不同 我应该使用什么类型的事件侦听器来进行区分?我找不到任何关于谷歌地图自动完成的其他活动的文档 我现在所拥有的: var gmaps = new google.maps.places.Autocomplete($("#searchproperties").get(0), { types: ['geocode'], componentRestriction

我有一个应用程序,当前可以在更改位置时正确启动

但是,我希望分支搜索在用户选择自动完成条目和用户在没有自动完成帮助的情况下自己输入文本时表现不同

我应该使用什么类型的事件侦听器来进行区分?我找不到任何关于谷歌地图自动完成的其他活动的文档

我现在所拥有的:

var gmaps = new google.maps.places.Autocomplete($("#searchproperties").get(0), 
{ types: ['geocode'], componentRestrictions: {country: 'us'} });

google.maps.event.addListener(gmaps, 'place_changed', function () {
    //FIRE SEARCH
});

在Google Maps Javascript API v3中,只有一个记录在案的事件,
place\u changed


您可以向其中添加标准HTML事件侦听器(不确定这是否会影响自动完成功能)。

如果您添加自己的输入处理程序(例如,在用户输入自己的文本后捕获CR),则自动完成和您的函数可能会背对背调用您的方法。我的解决方案是使用油门以避免重复呼叫:

$('#sell_address_input').keyup(function(e){ if(e.keyCode==13){throttle(addressEntered(),1000)}});

(更新答案-UTC 2018年10月18日)

更改后的位置显示:

如果用户输入控件未建议的地点名称并按Enter键,或者如果地点详细信息请求 失败,PlaceResult在名称中包含用户输入 属性,但未定义其他属性

因此(正如我在评论中提到的),我们可以检查属性
name
是否是通过检索的对象中唯一的属性。请参阅并尝试下面的代码段:

(如果API密钥不起作用,请使用。)

var gmaps=new google.maps.places.Autocomplete($(“#searchproperties”).get(0),
{types:['geocode'],componentRestrictions:{country:'us'}});
google.maps.event.addListener(gmaps,'place_changed',函数(){
var place=gmaps.getPlace(),
has_name=(place&&undefined!==place.name),
计数=0;
//遍历“place”,看看它是否有其他道具。
$.each(place | |{},function(){
如果(计数>1){
//不需要计算全部;因此,让我们中断迭代。
返回false;
}
计数++;
});
如果(名称和计数小于2){
$('#test').html('您没有选择并键入:'+place.name);
}否则{
$('#test').html('您选择:'+place.formatted_address);
}
});

这可以归结为检查是否收到一个
place.geometry
对象,如中所示。就这么简单

函数初始化(){
var ac=new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')){
类型:['geocode']
});
ac.addListener('place_changed',function(){
var place=ac.getPlace();
如果(!place.geometry){
//用户输入了未建议的地点的名称,然后
//按Enter键,或Place Details请求失败。
//对ac字段中输入的内容执行任何您喜欢的操作。
console.log('您输入:'+place.name);
返回;
}
console.log('您选择:'+位置.格式化的\u地址);
});
}
初始化()
#自动完成{
宽度:300px;
}

这是一个相当古老的问题,但我提出的解决方案可能比我在这里读到的要简单得多

“place_changed”事件仅在用户实际从谷歌列表中选择建议时触发

<> P>只要用户没有选择建议,您可以考虑输入的文本不是谷歌的位置结果。

从这里,您可以将“位置更改”视为一种“点击”事件,使用布尔存储当前状态

function initializeAutocomplete(id) {  
    var element = document.getElementById(id);    
    if (element) {    
        var autocomplete = new google.maps.places.Autocomplete(element, { types: ['geocode','establishment'], componentRestrictions: {country: ['fr']} });
        google.maps.event.addListener(autocomplete, 'place_changed', function(){
            var place = this.getPlace();
            console.log("A result from "+id+" was clicked !");
            for (var i in place.address_components) {    
                var component = place.address_components[i];    
                for (var j in component.types) {  
                    var type_element = document.getElementById(component.types[j]);      
                    if (type_element) {        
                        type_element.value = component.long_name;
                    }    
                }  
            }               
        });         
    }
}

我遇到的问题是,在Google
place\u change
事件之前触发模糊和更改事件。这使得我们很难知道到底发生了什么。你能解决你的问题吗?我也有同样的问题。我想OP的问题可以理解为“我应该用什么[…]来进行区分?”,在这种情况下,这根本不能提供解决方案。你肯定不需要这些。。。有关详细信息,请参见我的答案。@MrUpsidown至少,文档说,如果用户没有明确地从找到的建议位置(如果有)中进行选择,
name
属性将是用户在“自动完成”字段中键入的关键字。这是答案的要点。我们还可以简单地检查
place
是否将
name
作为唯一属性(如文档所述;因此我检查了
undefined===place.formatted\u address
),如果是,则这是一个手动“选择”,假设请求成功。当然,这是您答案的有效部分。为什么他们要检查
位置。几何图形
而不是另一个属性在任何地方都没有解释,但是我相信一个有效的位置总是有几何图形,而其他参数可能会丢失(这是我的解释)。在任何情况下,您的代码似乎都能工作,但您可以用更少的代码实现同样的效果;)是的,你说得对。我确实看到了
几何体
和所有其他可能的属性,但我想我关注的是“如果
格式化的\u地址
存在,那么这不是手动选择或失败的请求”。=)安威,谢谢你的编辑,虽然我故意不包括它,因为答案中已经有相同的链接。实际上,谢谢@MrUpsidown。我更新了答案。希望它能帮助别人PlacesAPI出人意料地过时了。这是一个非常优雅的回答。非常感谢!
function initializeAutocomplete(id) {  
    var element = document.getElementById(id);    
    if (element) {    
        var autocomplete = new google.maps.places.Autocomplete(element, { types: ['geocode','establishment'], componentRestrictions: {country: ['fr']} });
        google.maps.event.addListener(autocomplete, 'place_changed', function(){
            var place = this.getPlace();
            console.log("A result from "+id+" was clicked !");
            for (var i in place.address_components) {    
                var component = place.address_components[i];    
                for (var j in component.types) {  
                    var type_element = document.getElementById(component.types[j]);      
                    if (type_element) {        
                        type_element.value = component.long_name;
                    }    
                }  
            }               
        });         
    }
}