Question

我正在构建一个页面，其中包含一个包含2个文本输入框的表单search_term和search_location。这允许站点用户搜索特定位置附近的位置。为了防止达到API限制，我需要将用户输入的地址来自客户端从search_location文本输入框地址编码为LatLng坐标，该坐标将在$_POST[]中传递给PHP函数将访问MySQL数据库中的相关记录。

我认为这应该是可行的：

用户在地址/邮政编码中输入search_location文字输入框＆amp; search_term文字输入框中的关键字。
点击Submit按钮后，JS事件处理程序将使用Google Geocoder API对结果进行地理编码并返回LatLng坐标。
LatLng坐标传递给PHP函数，该函数以POST变量的形式访问它，并访问数据库以检索所需的结果。

问题： 在获取Google Geocoder API的地理编码结果后，我不知道如何提交表单，因此我可以在LatLng中传递POST坐标。目前，表单会在search_term和search_location输入框中传递用户输入的值。

Answer 1

基本上你需要设置2个隐藏字段（一个用于lat而另一个用于lng，除非你想将它们保存为1个字符串）并将coords保存到它然后提交表单：

你的表格：

<form id='codeForm' action='some.php'>
<input type='text' name='search_location'>
<input type='text' name='search_term'>
<input type='hidden' name='lat'>
<input type='hidden' name='lng'>
<input type="button" value="Search" onclick="codeAddress()">
</form>

在我使用按钮类型的表单中，如果您使用提交按钮，则需要取消提交操作，直到Google返回响应或使用表单的onSubmit（）事件。

您的地理编码js功能：

 function codeAddress() {
myForm =  document.forms["codeForm"]
    //get the address
        var address = myForm.elements["search_location"].value;
        geocoder.geocode( { 'address': address}, function(results, status) {
    //geocode was successful      
    if (status == google.maps.GeocoderStatus.OK) {
//grab the lat and long
            lat = results[0].geometry.location.lat
    lng = results[0].geometry.location.lng
   myForm.elements["lat"].value=lat
   myForm.elements["lng"].value=lng
//submit form
     myForm.submit();      
          } else {
//geocode failed
            alert("Geocode was not successful for the following reason: " + status);
          }
        });
      }

Answer 2

我稍微修改了迈克尔上面的代码，但遗憾的是，这个代码没有开箱即用。我觉得强调这一点非常重要，因为当我搜索“地理编码客户端隐藏字段”时，Google会将我带到这篇文章中。我直接从我的网站上使用以下代码，它使用$ _GET，但无论哪种方式都可以。我们从表格开始：

<form type="get" id='codeForm' action='index.php'>
<input type='text' name='search_location' id='search_location'>
<input type='text' name='search_term'>
<input type="submit" value="Search" id="submitform">
<input type='text' name='search_term'>
</form>

正如您所看到的，我从表单中删除了隐藏的lat和lng输入字段，并在下面添加了jquery：

<script type="text/javascript">
function codeAddress() {
    myForm =  document.forms["codeForm"];
    //get the address
    var geocoder = new google.maps.Geocoder();
    var address = document.getElementById('search_location').value;
    geocoder.geocode({'address': address, componentRestrictions:{country:"uk"}}, function(results, status) {
        //geocode was successful      
        if (status == google.maps.GeocoderStatus.OK) {
            //grab the lat and long
            var lat = results[0].geometry.location.lat();
            $("#codeForm").append("<input type='hidden' name='lat' value='" + lat + "' />");
            var lng = results[0].geometry.location.lng();
            $("#codeForm").append("<input type='hidden' name='lng' value='" + lng + "' />");

            //submit form

        } else {
        //geocode failed
        alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

$(document).ready(function() {
    $('#codeForm').submit(function(e) {
        var form = this;
        e.preventDefault();
        codeAddress();
        setTimeout(function () {
            form.submit();
        }, 1000); // in milliseconds
        return false;
    });
});
</script>

关于我的代码的重要一点是我添加了一个setTimeout延迟，感谢SO上的this post。没有延迟，我发现Michal的上述解决方案中的值没有及时附加。

作为一个脚注，我知道我可以在我的解决方案中改进javascript和jquery的组合，但重要的是它是一个有效的例子，并且由每个人和每个人自己修改。

使用POST传递客户端地理编码结果

2 个答案: