首页 文章

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

提问于
浏览 次
0

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

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

但是，如果用户键入地址而未选择自动填充建议中的地址，则 place_changed isn 't triggered and I can' t获取谷歌 Map 对象以拆分不同部分中的地址（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());
    }
});
javascript jquery google-maps google-maps-api-3 autocomplete

3 回答

  • 1

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

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

    快乐的编码！

    回复于
  • 0

    陷入类似的问题 . As per the API v3 documentation，如果用户没有从下拉列表中选择任何内容，则getPlace将返回一个只有输入值为stub.name的存根 . 如果地址组件未定义，则地理编码place.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);
}
    回复于
  • -1

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

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

    回复于

相关问题