Javascript与googlemaps

时间:2017-06-27 06:22:05

标签: javascript html google-maps

我的此表单中包含输入地址的输入,填写完表格后,地址应由googlemaps验证是否存在

这是表单HTML代码:

<form class="form-inline" id="Form" method="post" name="Form" onsubmit="event.preventDefault(); formSubmit();">
<div class="form-group">
    <input class="form-control customInput" id="fromSearch" onfocus="geolocate()" placeholder="From (Address)" required type="text">
</div>
<input class="btn btn-default nextBtn" type="submit" value="Next →">

和Javascript代码:

    function formSubmit() {
    var fromSearch = document.getElementById("fromSearch").value;
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({'address': fromSearch}, function(results, status) {
        if (status == 'OK') {
            document.getElementById("fromSearch").style.borderColor = '#55ff00';
            document.getElementById("fromSearch").style.backgroundColor = 'rgb(208, 237, 195)';
            document.getElementById("fromSearch").style.color = '#555';
        }
        else {
            document.getElementById("fromSearch").style.borderColor = 'red';
            document.getElementById("fromSearch").style.backgroundColor = '#FC8181';
            document.getElementById("fromSearch").style.color = 'white';
        }
    });
    return false;
}

Google API脚本:

<script src="https://maps.googleapis.com/maps/api/js?key=<?php echo $googlemaps_api; ?>&libraries=places&callback=initAutocomplete" async defer></script>

并且Google地图的功能自动完成

function initAutocomplete() {
var geocoder = new google.maps.Geocoder();
autocomplete = new google.maps.places.Autocomplete(
    (document.getElementById('fromSearch')), {
        types: ['address']
    });
setAutocompleteCountry();
autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();
    if (!place.geometry) {
        window.alert("No details available for input: '" + place.name + "'");
        return;
    }
});

}

提交表单时,它不会验证地址,而只是将样式更改为成功样式,当值从自动填充文本框更改为选定的地址时,它保持不变并且不会#39; t验证它。

我一直在努力解决这个问题并尝试修复它大约4天没有结果,有没有办法将地址验证链接到表单提交。

感谢您的帮助:)。

0 个答案:

没有答案