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

我正在构建一个包含两个文本输入框的表单的页面，

search\u term

和

search\u location

。这允许站点用户搜索特定位置附近的位置。为了防止达到API限制，我需要将用户输入的地址从

search\u location

文本输入框中地理编码到LatLng坐标，该坐标将在

$\u POST[]

中传递到一个PHP函数，该函数将访问MySQL数据库中的相关记录

我认为应该这样做：

用户在地址/zipcode中键入

搜索位置

文本输入框，并在

搜索词

文本输入框中键入关键字

单击

Submit

按钮时，JS事件处理程序将使用Google Geocoder API对结果进行地理编码，并返回

LatLng

坐标

LatLng

坐标被传递给PHP函数，PHP函数将其作为

POST

变量访问，并访问数据库以检索所需的结果

问题：

---

在从Google Geocoder API获得地理编码结果后，我不知道如何提交表格，以便在

POST

中传递

LatLng

坐标。目前，表单在

search\u term

和

search\u location

输入框中传递用户输入的值。

基本上，您需要设置两个隐藏字段（一个用于lat，另一个用于lng，除非您想将其保存为一个字符串），并将坐标保存到其中，然后提交表单：

<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>

您的表格：

<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>

---

我对上面Michael的代码稍加修改，但不幸的是，它不能开箱即用。我觉得强调这一点很重要，因为当我搜索“地理编码客户端隐藏字段”时，谷歌会带我到这篇文章。我直接从我的站点获取以下代码，该站点使用$\u-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>

函数代码地址（）{
myForm=document.forms[“codeForm”]；
//获取地址
var geocoder=new google.maps.geocoder（）；
var address=document.getElementById（'search_location'）。值；
geocoder.geocode（{'address'：地址，组件限制：{country:'uk}}}，函数（结果，状态）{
//地理编码成功了
if（status==google.maps.GeocoderStatus.OK）{
//抓住长柄和长柄
var lat=results[0]。geometry.location.lat（）；
$（“#代码形式”）。追加（“”）；
var lng=results[0]。geometry.location.lng（）；
$（“#代码形式”）。追加（“”）；
//提交表格
}否则{
//地理编码失败
警报（“地理编码因以下原因未成功：“+状态”）；
}
});
}
$（文档）.ready（函数（）{
$（“#代码形式”）.submit（函数（e）{
var form=此；
e、 预防默认值（）；
代码地址（）；
setTimeout（函数（）{
表单提交（）；
}，1000）；//以毫秒为单位
返回false；
});
});

关于我的代码，最重要的一点是我添加了一个setTimeout延迟，这要感谢on SO。毫不迟疑地，我发现上面Michal解决方案中的值没有及时追加

---

作为一个脚注，我知道我可以在我的解决方案中改进javascript和jquery的混合，但重要的是，这是一个工作示例，每个人都可以根据自己的意愿进行修改。

是否可以添加隐藏表单字段并保存LatLng坐标？或者您不能更改表单代码？是的，我可以更改表单代码并添加隐藏的表单字段。我的javascript也不是good@luke_mclachlan请参考我回答中关于使用提交按钮的那一行，我建议在geocoder返回之前取消提交。如果使用按钮类型触发地理编码，geocode.js函数将处理地理编码中的“延迟”。创建超时并不能解决问题，只会潜在地延迟问题。如果你想聪明一点，你也可以使用jquery.when（）函数。关于.when（）的好建议。我发现，即使使用按钮，而不是提交，也没有及时传递值。