如果用户在Google地图自动填充中选择地址，则忽略模糊事件

Posted 2021-05-06

我正在使用谷歌地图API V3与地点和自动完成API，我有一个事件顺序的问题。

我有一个输入文本，当我在此字段中输入地址时，我有自动完成功能，然后我可以用鼠标选择地址。它完美地运作。

但是，如果用户键入地址而不选择自动完成建议中的地址，则place_changed不会被触发，我无法让google地图对象拆分不同部分的地址（postal_code，city，street_numer ...）。

所以我想到了一个解决方案。我决定使用blur事件。在这种情况下，如果用户键入不明确的地址或者用户没有点击自动完成建议，我将使用地理编码器检索地址。然后我可以得到postal_code，street_number ......甚至使用类型都是一个模糊的地址。

我想只在用户没有点击自动填充建议时才使用blur事件。但问题是，在谷歌地图自动完成事件之前触发模糊事件，然后我无法设置标志变量。

我必须这样做，因为当我在自动完成建议中选择一个地址时，会触发模糊事件，有时我会得到建议的地址，有时我会得到地理编码器的结果。

这是我的代码的一部分：

autocomplete = new google.maps.places.Autocomplete(input, options);

google.maps.event.addListener(autocomplete, 'place_changed', function() {

    var place = autocomplete.getPlace();

    initializeAddress(place);
});

function geocoder(ambiguousAddress){
    var geocoder = new google.maps.Geocoder();

    geocoder.geocode({"address": ambiguousAddress}, function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {
            $('#address').val(results[0].formatted_address);
            initializeAddress(results[0]);
        }
    });
}

function initializeAddress(place){
    for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];

        latitude = place.geometry.location.lat();
        longitude = place.geometry.location.lng();

        switch (addressType) {
            case 'street_number':
                street_number = place.address_components[i][componentForm[addressType]];
                break;
            case 'route':
                route = place.address_components[i][componentForm[addressType]];
                break;
            case 'locality':
                city = place.address_components[i][componentForm[addressType]];
                break;
            case 'postal_code':
                postal_code = place.address_components[i][componentForm[addressType]];
                break;
            default:
                break;
        }
    }

    address = street_number + ' ' + route;
}

$('#address').on('blur', function(e) {
    if( $.trim($(this).val()) != '' ){
        geocoder($(this).val());
    }
});

答案

陷入类似的问题。 As per the API v3 documentation，如果用户没有从下拉列表中选择任何内容，getPlace将返回一个只有输入值为stub.name的存根。如果地址组件未定义，则对地址组件进行地理编码解决了许多场景，除了标签外。为此，我使用了这个答案的解决方案：Google Autocomplete Places API not triggering event on change via TAB。

恕我直言，这似乎比它应该更难。

function onPlaceChange() {

    console.log("on place change");
    var place = autocomplete.getPlace();
    if (typeof place.address_components !== "undefined") {
        console.log("place filled in");
        fillInAddress(place);
    } else {
        var geocoder = new google.maps.Geocoder();
        var onSuccess = function (google_results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                fillInAddress(google_results[0]);
            }
        }
        console.log("geocoding " + place.name);
        geocoder.geocode({'address': place.name}, onSuccess);
    }

}

function initAutocomplete() {

    var location_field = document.getElementById('address');
    google.maps.event.addDomListener(location_field, 'blur', function () {
        google.maps.event.trigger(this, 'focus');
        google.maps.event.trigger(this, 'keydown', {
            keyCode: 13
        });
    })

    autocomplete = new google.maps.places.Autocomplete(
        /** @type {!htmlInputElement} */(location_field),
        {types: ['address']});

    autocomplete.addListener('place_changed', onPlaceChange);
}

另一答案

你可以在这里找到解决方案：https://stackoverflow.com/a/42101702/2409212

基本上它是做什么来检查是否有一个pac-item（每个结果行的类名）元素悬停。如果没有元素悬停，意味着应该执行自动选择，否则，它将让我们选择一个！

另一答案

Autocomplete类绑定到文本框。如果是这种情况，我相信它已经有一个模糊实现（这就是它被触发的原因）。

检查你是否可以在blur的Autocomplete上注册listener。希望这可以解决问题。

快乐的编码！