我正在构建一个页面，该页面包含一个带有两个文本输入框search_term和search_location的表单。这允许站点用户搜索特定位置附近的位置。为了防止达到API限制，我需要将客户端用户输入的地址从search_location文本输入框地理编码为LatLng坐标，该坐标将在$_POST[]中传递给PHP函数，该函数将访问MySQL数据库中的相关记录。
这就是我认为它应该如何工作：
- 用户在CCD_ 5文本输入框中键入地址/邮政编码&将关键字输入到CCD_ 6文本输入框中
- 单击
Submit按钮时，JS事件处理程序将使用Google Geocoder API对结果进行地理编码并返回LatLng坐标 LatLng坐标被传递给PHP函数，PHP函数将其作为POST变量进行访问，并访问数据库以检索所需的结果
问题：我不知道如何在从Google Geocoder API获得地理编码结果后提交表格，这样我就可以在POST中传递LatLng坐标。此时，表单通过search_term和search_location输入框中的用户输入值。
基本上，您需要设置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>
在表单中，我使用了按钮类型。如果你使用提交按钮，你需要取消提交操作，直到谷歌返回响应或对表单使用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上面的代码进行了轻微修改，但不幸的是，这并不能开箱即用。我觉得强调这一点很重要，因为当我搜索"地理编码客户端隐藏字段"时，谷歌会把我带到这篇文章。我直接从我的网站上获取以下代码，该网站使用$_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>
关于我的代码，重要的一点是，由于SO上的这篇文章，我添加了setTimeout延迟。如果没有延迟，我发现上面Michal解决方案中的值没有及时添加。
作为一个脚注，我知道我可以在解决方案中改进javascript和jquery的组合，但重要的是，这是一个有效的示例，每个人都可以根据自己的意愿进行修改。