Javascript 更改Google地图自动完成字段的值_Javascript_Jquery_Google Maps_Google Maps Api 3_Google Maps Autocomplete

Javascript 更改Google地图自动完成字段的值

javascript jquery google-maps google-maps-api-3

Javascript 更改Google地图自动完成字段的值,javascript,jquery,google-maps,google-maps-api-3,google-maps-autocomplete,Javascript,Jquery,Google Maps,Google Maps Api 3,Google Maps Autocomplete,在Google Maps autocomplete字段的值更改后，如何更改该字段的值我的最终愿望是在这个字段中显示地址，在单独的字段中显示城市、州等如（下面复制的脚本）所示，我更改了该值，但后来又更改回来问同样的问题，但似乎不再有效。也会问同样的问题，但没有足够的答案多谢各位 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&

在Google Maps autocomplete字段的值更改后，如何更改该字段的值

我的最终愿望是在这个字段中显示地址，在单独的字段中显示城市、州等

如（下面复制的脚本）所示，我更改了该值，但后来又更改回来

问同样的问题，但似乎不再有效。也会问同样的问题，但没有足够的答案

多谢各位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Places search box</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
        <script>
            $(function(){
                var input_auto = document.getElementById('input_auto');
                autocomplete = new google.maps.places.Autocomplete(input_auto,{types: ['geocode'],radius: 10});
                google.maps.event.addListener(autocomplete, 'place_changed', function() {
                    setTimeout(function(){$('#input_auto').val('yyy');},50);
                    alert('pause1');
                    console.log(autocomplete,input_auto);
                    input_auto.value='xxx';
                    //autocomplete.set('xxx');
                    //autocomplete.setValues('xxx');
                    alert('pause2');
                });
            });

        </script>
    </head>
    <body>
        <input id="input_auto" type="text">
    </body>
</html>


位置搜索框
$（函数（）{
var input_auto=document.getElementById（'input_auto'）；
autocomplete=new google.maps.places.autocomplete（input_auto，{types:['geocode']，radius:10}）；
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
setTimeout（function（）{$（'#input_auto'）.val（'yyy'）；}，50）；
警报（“暂停1”）；
日志（自动完成，输入自动）；
输入_auto.value='xxx'；
//自动完成.set（'xxx'）；
//自动完成。设置值（'xxx'）；
警报（“暂停2”）；
});
});

您可以通过向

blur

和

keydown

事件添加事件侦听器来覆盖自动值来解决此问题。看看我在下面做了什么：


位置搜索框
$（函数（）{
var input_auto=document.getElementById（'input_auto'）；
autocomplete=new google.maps.places.autocomplete（input_auto，{types:['geocode']，radius:10}）；
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
input_auto.addEventListener（'blur'，function（）{
输入_auto.value='yyy'；
});
input_auto.addEventListener（'keydown'，function（）{
输入_auto.value='yyy'；
});
setTimeout（函数（）{$（'#input_auto'）.val（'yyy'）；}，1）；
});
});

您正在使用大量不需要的事件。当用户从自动完成选项中选择地址时，自动完成触发

place\u changed

事件。当该事件激发时，autocomplete将填充其附加到的字段

以下是对您的问题的一个结构更合理的答案，它将使您能够“在此字段中显示地址，并在单独的字段中显示城市、州等”：

（函数（）{
变量$inputAuto=$（'#input_auto'）；
var ADDRC组件={
街道号码：{
显示：“短名称”，
类型：“街道号码”
},
街道名称：{
显示：“长名称”，
类型：“路线”
},
城市名称：{
显示：“长名称”，
类型：“地点”
},
州名：{
显示：“短名称”，
类型：“行政区\级别\ 1”
},
zipCode：{
显示：“短名称”，
类型：“邮政编码”
}
};
var自动完成；
var自动完成选项={
半径：10，
类型：['geocode']
};
函数initAutocomplete（）{
autocomplete=newgoogle.maps.places.autocomplete（$inputAuto[0]，autocompleteOptions）；
autocomplete.addListener（'place\u changed'，setAddress）；
};
函数setAddress（）{
var place=autocomplete.getPlace（）.address\u组件；
var streetAddress=[addrComponents.streetNumber，addrComponents.streetName]；
var streetAddressDisplay=[]；
//添加其他字段值
place.forEach（函数（placeComponent）{
forEach（函数（StreetAddressComponent）{
if（placeComponent.types[0]==StreetAddressComponent.type）{
streetAddressDisplay.push（placeComponent[streetAddressComponent.display]）；
}
//否则，如果包含您想要做的事情
希望这能有所帮助。祝你好运！
我发现通过编程更改自动完成输入值的最简单方法是重新初始化输入字段
var input = document.getElementById(input_auto);
autocomplete = new google.maps.places.Autocomplete(input, option);

google.maps.event.addListener(autocomplete, 'place_changed', function() {
   // perform any functions based on place input
   ...
   // change the value of your autocomplete to whatever you want
   input.value = 'yyy';
   // reinitialize with new input value
   autocomplete = new google.maps.places.Autocomplete(input, option);
}

@Dr.Molle的可能副本你认为这是海报上说的一个“bug”，还是谷歌眼中的一个功能？我认为这是一个不完整的实现。更改输入值的方法比键入更多（例如，编程方式，但也包括剪切/粘贴或表单的重置方法），API应该考虑到这些可能性。我看不出这是如何回答问题的，我想你误解了OP的要求。OP希望街道地址显示在初始自动完成字段中，而不是在单独的字段中。这是我找到的最好也是唯一的解决方案。
var input = document.getElementById(input_auto);
autocomplete = new google.maps.places.Autocomplete(input, option);

google.maps.event.addListener(autocomplete, 'place_changed', function() {
   // perform any functions based on place input
   ...
   // change the value of your autocomplete to whatever you want
   input.value = 'yyy';
   // reinitialize with new input value
   autocomplete = new google.maps.places.Autocomplete(input, option);
}