Question

我有一个使用Google Maps API自动填充功能的输入字段。我想将数据从该输入保存到数据库（Firebase）。但问题是，在选择自动填充结果并提交表单后，它会显示保存值我在选择自动填充之前键入的内容

EX：

在输入“新”后，我从自动填充中选择“纽约市......” 即使输入字段显示“纽约市”，它提交的内容仅为“新”

出于演示目的，我将其连接到Google Map iframe：在此处找到完整代码：http://codepen.io/Auzy/pen/wJyXKR?editors=1111

const searchInput = document.getElementById('searchTextField');
const autocomplete = new google.maps.places.Autocomplete(searchInput);

searchInput.addEventListener("change", () => {
    let addr = searchInput.value;
    console.log(addr)
    let embed= "<iframe frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?&amp;q="+ encodeURIComponent( addr ) + "&amp;output=embed'></iframe>";  

    $('.place').html(embed);                                         
});
function getInput(){

    var addr = document.getElementById('searchTextField').value;


        var embed= "<iframe frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?&amp;q="+ encodeURIComponent( addr ) + "&amp;output=embed'></iframe>";  

        $('.place').html(embed);

};

Answer 1

Hello_ mate，

当您调用代码时，searchInput.value似乎仍未更新。

在执行代码之前尝试暂停 - 请参阅forked codepen HERE

所以你可以解决这个问题：

searchInput.addEventListener("change", () => {
    // Wrap in setTimeout, so you give time searchInput.value to be updated
    setTimeout(function() {
        let addr = searchInput.value;
        console.log(addr)
        let embed = "<iframe frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?&amp;q=" + encodeURIComponent(addr) + "&amp;output=embed'></iframe>";

        $('.place').html(embed);
    }, 100); 
});

<强>结论

在google.maps.places.Autocomplete更新<input>

的值之前有一段延迟

Maps API自动填充建议不会替换输入

1 个答案: