地理编码：通过提交表单无法进行转换

Question

我有一个表单，它使用 onsubmit 属性将地址转换为带有 Google 地图 API 的地理编码。因为我知道地理编码是异步的。有时有效，有时无效。谁能帮帮我吗？非常感谢！

jsp-文件：

<body>
    <form name="addLocation" method="POST" action="addLocation.htm" commandName="location" onsubmit="changeAdress()">
        <table>
            <tr>
                <td>Name</td>
                <td><input type="text" name="name" value="${location.name}"/></td>
            </tr>
            <tr>
                <td>Adress</td>
                <td><input type="text" id="adress" name="adress"/></td>
            </tr>
            <tr>
                <td><input type="hidden" id="geolocation" name="geolocation"/></td>
            </tr>
        </table>
            <input type="hidden" name="id" value="${location.id}"/>
            <input type="submit" name="action" value="Save"/>
            <input type="submit" name="action" value="Cancel"/>
    </form>
</body>

脚本：

    function changeAdress() {
        var adress = document.getElementById("adress").value; 
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({'address': adress}, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var latitude = results[0].geometry.location.lat();
                var longitude = results[0].geometry.location.lng();
                document.addLocation.geolocation.value = latitude + " " + longitude;
                document.addLocation.submit();
            } else alert("geocode failed:" + status);
        });
        return false;
    }

你随时可以自己尝试：http://jbossewss-leuvenspeaks.rhcloud.com/Test/newLocation.htm

Answer 1

删除内联事件处理程序，使用适当的事件处理程序，然后阻止提交表单，并在地理编码器完成并将值添加到表单时以编程方式提交。

顺便说一句，您代码中的 return false 不会阻止表单提交。

document.getElementsByName('addLocation')[0].addEventListener('submit', function(e) {
    e.preventDefault();

    var self     = this;
    var adress   = document.getElementById("adress").value; 
    var geocoder = new google.maps.Geocoder();
    var geoloc   = document.getElementById("geolocation"); 

    geocoder.geocode({'address': adress}, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var latitude  = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();

            geoloc.value = latitude + " " + longitude;
            self.submit();
        } else {
            alert("geocode failed:" + status);
        }
    }); 
});

地理编码：通过提交表单无法进行转换

Geocode : converting doesn't work by submitting form

javascript

jsp

geolocation

google-maps-api-3

geocode