Question

我正在为酒店建立一个网站。联系/预订表格应包含一个文本字段，以便用户可以写下他/她的国家/地区。

我想实现一种地理跟踪，地理定位或允许我获取原产国/城市的东西，并在表单的字段中使用该信息，以便通过其他信息传递字段的内容电子邮件。

我已尝试使用此网站http://www.maestrosdelweb.com/util/geo/geo.html中的代码，我的代码放在此处：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><script type="text/javascript">
//<![CDATA[
try{if (!window.CloudFlare) { var CloudFlare=[{verbose:0,p:0,byc:0,owlid:"cf",mirage:{responsive:0,lazy:0},oracle:"35/0f710f6add20ad3fc449c08c96bdf2",paths:{cloudflare:"/cdn-cgi/nexp/aav=366183412/"},atok:"3ef00aeff8d6c935da4e270822a8471b",zone:"maestrosdelweb.com",rocket:"0",apps:{"ga_key":{"ua":"UA-309831-1","ga_bs":"2"}}}];var a=document.createElement("script"),b=document.getElementsByTagName("script")[0];a.async=!0;a.src="//ajax.cloudflare.com/cdn-cgi/nexp/aav=4114775854/cloudflare.min.js";b.parentNode.insertBefore(a,b);}}catch(e){};
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
window.__CF=window.__CF||{};window.__CF.AJS={"ga_key":{"ua":"UA-309831-1","ga_bs":"2"}};
//]]>
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="robots" content="noindex,follow"/>
<title>Geolocalizacion con HTML5</title>
<link rel="shortcut icon" href="/favicon.ico"/>
<style type="text/css">img{border:0}</style>
<script type="text/javascript">
/* <![CDATA[ */
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-309831-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

(function(b){(function(a){"__CF"in b&&"DJS"in b.__CF?b.__CF.DJS.push(a):"addEventListener"in b?b.addEventListener("load",a,!1):b.attachEvent("onload",a)})(function(){"FB"in b&&"Event"in FB&&"subscribe"in FB.Event&&(FB.Event.subscribe("edge.create",function(a){_gaq.push(["_trackSocial","facebook","like",a])}),FB.Event.subscribe("edge.remove",function(a){_gaq.push(["_trackSocial","facebook","unlike",a])}),FB.Event.subscribe("message.send",function(a){_gaq.push(["_trackSocial","facebook","send",a])}));"twttr"in b&&"events"in twttr&&"bind"in twttr.events&&twttr.events.bind("tweet",function(a){if(a){var b;if(a.target&&a.target.nodeName=="IFRAME")a:{if(a=a.target.src){a=a.split("#")[0].match(/[^?=&]+=([^&]*)?/g);b=0;for(var c;c=a[b];++b)if(c.indexOf("url")===0){b=unescape(c.split("=")[1]);break a}}b=void 0}_gaq.push(["_trackSocial","twitter","tweet",b])}})})})(window);
/* ]]> */
</script>
</head>
<body onload="detectar()">
<h1>Ejemplo de geolocalizacion basado en HTML5</h1>
<div id="mapa">
</div>
<script src="http://code.google.com/apis/gears/gears_init.js" type="text/javascript" charset="utf-8"></script>
<script src="geo.js" type="text/javascript" charset="utf-8"></script>
<script language="javascript">
function detectar(){
if(geo_position_js.init())
{
    document.getElementById('mapa').innerHTML="Leyendo...";
    geo_position_js.getCurrentPosition(mostra_ubicacion,function(){document.getElementById('mapa').innerHTML="No se puedo detectar la ubicación"},{enableHighAccuracy:true});
}   else    {
    document.getElementById('mapa').innerHTML="La geolocalización no funciona en este navegador.";
}
}
function mostra_ubicacion(p){
var coords = p.coords.latitude + "," + p.coords.longitude;
document.getElementById('mapa').innerHTML="<p>latitud="+p.coords.latitude.toFixed(2)+" longitud="+p.coords.longitude.toFixed(2) + "</p>"
            +"<a href=\"http://maps.google.com/?q="+coords+"\"><img src=\"http://maps.google.com/maps/api/staticmap?center="+coords+"&maptype=hybrid&size=400x400&zoom=12&markers=size:mid|"+coords+"&sensor=false\" alt=\"mapa\"/></a>";
}
</script>
</body>
</html>

然而，此代码返回一个包含用户地理坐标（纬度/经度）的地图。

是否有一种简单的方法可以确定并在表单的字段中使用该信息？

提前致谢。

Answer 1

HTML5地理位置API将为您提供用户的纬度和经度（假设他们选择加入）。如果您需要获取城市，国家/地区或邮政编码等信息，则需要使用反向地理编码网络服务。那里有很多：

Google
Bing
等

所以请你选择...只需确保查看条款＆amp;条件，并确保一旦网站上线，您将不会违反。

你应该能够通过谷歌搜索找到代码示例，这是一个相当常见的用例。步骤将是：

使用现有代码获取用户的lat / lng。
进行AJAX（JSONP）调用以请求反向地理编码（使用您的地理编码提供程序来确定要使用的URL。例如，对于Google，它就像this）。
解析JSON响应以提取您需要的信息（国家，城市）。

Answer 2

另一个stackoverflow question讨论了允许基于IP地址进行地理定位的Web服务

您可以使用它来实现服务器端解决方案，该解决方案生成标记并填充其位置。

Answer 3

老式（并且仍然普遍！）方式是对客户端IP地址进行反向查找：）

如何确定网站访问者的城市并在表单中使用它

3 个答案: