使用POST传递客户端地理编码结果
Passing Clientside Geocoded Result using POST
我正在构建一个页面,该页面包含一个带有两个文本输入框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的组合,但重要的是,这是一个有效的示例,每个人都可以根据自己的意愿进行修改。
- 将地理编码结果转换为php变量以发布到mysql数据库
- 一个javascript实现base64图像编码并将结果写入文本文件
- 为什么我的javascript地理编码函数返回空白结果
- 读取一个本地文件,编码为base64,我想给用户一个将结果保存到文件的选项
- 如何在php JSON编码结果中包含谷歌分析
- AJAX PHP JSON编码未返回所有结果
- 谷歌应用程序脚本和JavaScript中base64编码的不同结果
- 如何防止谷歌地理编码器从其他国家/地区返回结果
- 如何仅从反向地理编码结果中获取邮政编码
- 返回英国邮政编码只是谷歌地图地理编码结果的一部分
- 反向地理编码结果不正确
- iso-8859-1中的perl utf8 encode向javascript utf8编码返回不同的结果
- 传单地理编码和可拖动标记在输入字段中显示结果
- Javascript-谷歌地图,简单的反向地理编码-总是零结果
- 为什么不是'我的谷歌地图API反向地理编码显示结果
- 地址地理编码返回无效的结果使用谷歌地理编码
- 如何在jquery中制作链接,编码实时搜索结果
- 角度地理编码结果不同步
- 使用POST传递客户端地理编码结果
- 缓存谷歌地图客户端地理编码结果