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

如何解决使用POST传递客户端地理编码结果

| 我正在构建一个页面，其中包含带有2个文本输入框search_term和search_location的表单。这允许站点用户搜索特定位置附近的地点。为了防止超出API限制，我需要在客户端将用户输入的地址从“ 1”文本输入框地理编码为LatLng坐标，该坐标将在“ 3”中传递给PHP函数，该函数将访问MySQL数据库中的相关记录。我认为这应该是这样的：用户在“ 1”文本输入框中输入地址/邮政编码，在“ 0”文本输入框中输入关键字。单击“ 6”按钮时，JS事件处理程序将使用Google Geocoder API对结果进行地理编码并返回“ 7”坐标。 LatLng坐标传递给PHP函数，该函数以POST变量对其进行访问，并访问数据库以检索所需的结果。问题：我不知道从Google Geocoder API获得地理编码结果后如何提交表单，因此我可以在POST中传递LatLng坐标。目前，表格在“ 0”和“ 1”输入框中传递用户输入的值。

解决方法

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

<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);
          }
        });
      }

, 我对上面的Michael \进行了稍微修改的代码，不幸的是，它开箱即用。我觉得强调这一点很重要，因为当我搜索“地理编码客户端隐藏字段”时，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\"}},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>

关于我的代码的重点是，由于这篇关于SO的文章，我添加了setTimeout延迟。没有延迟，我发现上面的Michal解决方案中的值没有及时添加。作为一个脚注，我知道我可以在解决方案中改进javascript和jquery的组合，但是重要的是，这是一个有效的示例，每个人都可以根据自己的意愿进行修改。

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

如何解决使用POST传递客户端地理编码结果

解决方法

相关推荐