Google商家信息自动填充强制选择

Question

我正在使用JavaScript放置自动完成API v3.它工作正常,但我想知道是否有办法强制从自动完成选择,即输入不接受任何自由格式文本.我查看了文档并没有看到这样的选项,但我想我会要求安全.我确信我可以通过一些JavaScript来解决这个问题,但是如果可用的话,我更愿意使用已经构建的方法.谢谢!

Answer 1

实际上,我们所做的是以下内容:
- 每次从自动完成列表中选择一个位置时,我们会填充一些隐藏字段,其中一些字段来自JSON响应(城市名称,国家/地区名称,经度和纬度)
- 当表单时提交后,我们检查这些字段是否有值,如果没有,则表示用户而不是从列表中选择一个位置,他只是自己输入了一个值.

它不是以JS的方式解决问题,但仍然可以做到这一点!

Answer 2

 <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"
    type="text/javascript"></script>
<script>
    var IsplaceChange = false;
    $(document).ready(function () {            
        var input = document.getElementById('txtlocation');
        var autocomplete = new google.maps.places.Autocomplete(input, { types: ['(cities)'] });

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

            IsplaceChange = true;
        });

        $("#txtlocation").keydown(function () {
            IsplaceChange = false;
        });

        $("#btnsubmit").click(function () {

            if (IsplaceChange == false) {
                $("#txtlocation").val('');
                alert("please Enter valid location");
            }
            else {
                alert($("#txtlocation").val());
            }

        });
    });
</script>

Answer 3

Google Places API目前不支持此功能.如果您认为这是一个有用的功能,请提交Places API - 功能请求.

Answer 4

下面的解决方案对我来说很有效（使用 jQuery）。blur()这个想法是在输入失去焦点时使用该事件强制最后选择的地址。

我们添加一个超时来防止 和 之间的blur冲突place_changed事件之间发生冲突。

考虑以下 html：

<input type="text" placeholder="Your address" id="autocomplete">

以及以下 JavaScript ：

var autocomplete = new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')),
    {types: ['geocode']});
autocomplete.addListener('place_changed', fillInAddress);

var currentAddress = {
    line_1: "",
    line_2: "",
    zipcode: "",
    city: "",
    country: "",
    lat: "",
    lng: "",
    one_liner: ""
};

function fillInAddress() {
    var place = this.autocomplete.getPlace();
    // reset the address
    currentAddress = {
        line_1: "",
        line_2: "",
        zipcode: "",
        city: "",
        country: "",
        lat: "",
        lng: "",
        one_liner: place.formatted_address
    };
    // store relevant info in currentAddress
    var results = place.address_components.reduce(function(prev, current) {
        prev[current.types[0]] = current['long_name'];
        return prev;
    }, {})
    if (results.hasOwnProperty('route')) {
        currentAddress.line_1 = results.route;
    }
    if (results.hasOwnProperty('street_number')) {
        currentAddress.line_1 = results.street_number + " " + currentAddress.line_1;
    }
    if (results.hasOwnProperty('postal_code')) {
        currentAddress.zipcode = results.postal_code;
    }
    if (results.hasOwnProperty('locality')) {
        currentAddress.city = results.locality;
    }
    if (results.hasOwnProperty('country')) {
        currentAddress.country = results.country;
    }
    currentAddress.lat = Number(place.geometry.location.lat()).toFixed(6);
    currentAddress.lng = Number(place.geometry.location.lng()).toFixed(6);
}

$('#autocomplete').blur(function() {
    var address = $('#autocomplete').val();
    // we set a timeout to prevent conflicts between blur and place_changed events
    var timeout = setTimeout(function() {
        // release timeout
        clearTimeout(timeout);
        if (address !== currentAddress.one_liner) {
            $('#autocomplete').val(currentAddress.one_liner);
        }
    }, 500);
});

我希望这有帮助。