Question

如何重现问题：

在此页面上 https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

选择一些地址，例如20 Water Street, New York City, NY, United States，（正如预期的那样，字段正在填充信息）。现在，例如在地址更改20到10，而不是从建议列表中选择地址，只需单击页面上的某个位置。建议的列表消失，新地址10 Water Street, New York City, NY, United States仍保留在输入字段中，但字段信息未更新。

我用它来获取经度和纬度。因此，如果用户不是点击地址，而是点击外部，看起来就像是他改变了地址，但事实上我仍然会有之前地址的Lat和Lng。

这是init函数

var autocomplete;
function initialize() {
    autocomplete = new google.maps.places.Autocomplete(
    /** @type {HTMLInputElement} */
    (document.getElementById('addressAutocomplete')), {
        types : [ 'geocode' ]
    });

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

我在想这样可以工作，但事实并非如此，这一行console.log(place);输出未定义

$(document).ready(function() {
    $(document).on('focusout', '#addressAutocomplete', function() {
        google.maps.event.trigger(autocomplete, 'place_changed', {});
    });
});

由于

Answer 1

我有一个类似的问题（在给定字段中的任何内容都应该是有效的Google地图地址），并且基于Alexandre Boulier的建议链接构建了一个灵感来自这个的解决方案，这可能对您有所帮助。这个想法是：

当用户执行其他操作而不是点击Google地图建议时
触发事件以将焦点转移到第一个建议
触发事件以选择它

我将结果复制到我自己的代码中（使用Jquery）：

//// Ensuring that only Google Maps adresses are inputted
function selectFirstAddress (input) {
    google.maps.event.trigger(input, 'keydown', {keyCode:40});
    google.maps.event.trigger(input, 'keydown', {keyCode:13});
}

// Select first address on focusout
$('#content').on('focusout', 'input#xxx__zzz', function() {
    selectFirstAddress(this);
});

// Select first address on enter in input
$('#content').on('keydown', 'input#xxx__zzz', function(e) {
    if (e.keyCode == 13) {
        selectFirstAddress(this);
    }
});

对我而言，它有用，我希望它有所帮助！

在焦点上触发谷歌地图自动完成

1 个答案: