2013-01-05 158 views
26

有没有一种方法可以只使用jQuery在网站上查找客户位置?例如,如果用户访问我的网站,我怎么才能找出他们的大概位置只是使用jQuery。例如,如果用户来自旧金山CA,则会有一些类型标识符让我知道用户来自旧金山CA.我不会真的需要他们确切的位置,只是县或一般的起源地区。使用jQuery/JS(无谷歌地理定位API)查找用户位置?

编辑:如何生成 上http://flourishworks-webutils.appspot.com/req的信息?

感谢

+0

,使用jQuery的['ESP'插件(http://jquery.com/esp)。说真的,答案是“不”,你不能只用客户端代码来做到这一点。 – nnnnnn

+0

您可以使用GeoLocation,但他们必须批准它,但仍不准确。除此之外,我没有发现全面的客户端方法。 – Syon

+0

如果你不想使用地理定位API,你可以根据他们的IP地址得到一个非常粗略的估计值,但是你不能只从jQuery那里得到(你需要服务器合作)。 – Matt

回答

13

HTML5 Geolocation API可以让你获得一些JavaScript的用户的纬度/经度(如果浏览器兼容,如果用户允许他/她的位置访问)。

然后你可以在reverse-geocode的位置得到一个地址,除了Google的API之外还有几个free reverse-geocoding服务。

不过,如果你并不需要的准确位置,如果你希望所有用户采取功能(无论浏览器)的优势,如果你不想询问他们是否允许你的网站有他们的位置,我会推荐到use your user's IP to get the location

1

任何客户端的选择是不是一个好主意,因为它们是由计算机根据周围的无线网络提供。我敢打赌,90%的桌面用户没有激活此功能。当你到达一个想要你的位置的网站时,你必须点击一个按钮来同意。如果他们刚上网,那么他们首先想知道你为什么需要他们的位置。

一个好方法是向他们展示一个页面为什么你需要自己的位置告知他们,你将永远不会将其用于任何其他目的,而不是指定的一个,而且位置也不会被保存在数据库中。

如果是运行服务器端的脚本,再有就是从客户机到服务器的连接。在这种情况下,服务器必须知道IP地址。有一个技巧可以让你首先获得IP地址。

在您的服务器上创建一个php脚本,该脚本将只返回IP地址。由于jquery是在本地处理的,所以当连接到服务器时,客户端IP地址将被公开。它需要一些额外的时间才能建立所需的连接,但很快IP地址将在jQuery中可用。

然后,您可以拨打槽jQuery的外部API,它会给你一个特定的IP地址信息。您可以购买IP数据库并将其安装在您的Web服务器上,以便您可以调用它,或者使用其他API。您可以查看http://www.ipgp.net/ip-address-geolocation-api/

22

您可以使用支持JSONP的Web服务,例如我的服务http://ipinfo.io。它会为您提供客户端的IP地址,主机名,地理位置信息和网络所有者。这里的行动与jQuery它的一个例子:

$.get("http://ipinfo.io", function(response) { 
    $("#ip").html(response.ip); 
    $("#address").html(response.city + ", " + response.region); 
}, "jsonp"); 

这里有一个更详细的jsfiddle的例子,还打印出完整的响应信息,所以你可以看到所有可用的细节:http://jsfiddle.net/zK5FN/2/

+3

这可行,但如果每天有超过1,000个API请求,则会出现问题。如果您需要提出更多请求,您需要付费。 –

2
**jQuery(document).ready(function($) { 
    jQuery.getScript('http://www.geoplugin.net/javascript.gp', function() 
{ 
    var country = geoplugin_countryName(); 
    var zone = geoplugin_region(); 
    var district = geoplugin_city(); 
    console.log("Your location is: " + country + ", " + zone + ", " + district); 
}); 
}); 
<script language="JavaScript" src="http://www.geoplugin.net/javascript.gp" type="text/javascript"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function($) { 
    alert("Your location is: " + geoplugin_countryName() + ", " + geoplugin_region() + ", " + geoplugin_city()); 
}); 
</script> 
/*--------------------------------detailed function list not necessarily to be included--------- 
function geoplugin_city() { return 'Dobroyd Point';} 
function geoplugin_region() { return 'New South Wales';} 
function geoplugin_regionCode() { return '02';} 
function geoplugin_regionName() { return 'New South Wales';} 
function geoplugin_areaCode() { return '0';} 
function geoplugin_dmaCode() { return '0';} 
function geoplugin_countryCode() { return 'AU';} 
function geoplugin_countryName() { return 'Australia';} 
function geoplugin_continentCode() { return 'OC';} 
function geoplugin_latitude() { return '-33.873600';} 
function geoplugin_longitude() { return '151.144699';} 
function geoplugin_currencyCode() { return 'AUD';} 
function geoplugin_currencySymbol() { return '&amp;#36;';} 
function geoplugin_currencyConverter(amt, symbol) { 
    if (!amt) { return false; } 
    var converted = amt * 0.9587170632; 
    if (converted &lt;0) { return false; } 
    if (symbol === false) { return Math.round(converted * 100)/100; } 
    else { return '&amp;#36;'+(Math.round(converted * 100)/100);} 
    return false; 
} 
*/ 
//----------------example-----------------------// 
<html> 
<head> 
    <script language="JavaScript" src="http://www.geoplugin.net/javascript.gp" type="text/javascript"></script> 
</head> 
<body> 
    <script language="Javascript"> 
    document.write("Welcome to our visitors from "+geoplugin_city()+", "+geoplugin_countryName()); 
    </script> 
</body> 
</html> 
31

为了jQuery中获取客户端IP地址&国名:

$.getJSON("http://freegeoip.net/json/", function(data) { 
    var country_code = data.country_code; 
    var country = data.country_name; 
    var ip = data.ip; 
    var time_zone = data.time_zone; 
    var latitude = data.latitude; 
    var longitude = data.longitude; 

    alert("Country Code: " + country_code); 
    alert("Country Name: " + country); 
    alert("IP: " + ip); 
    alert("Time Zone: " + time_zone); 
    alert("Latitude: " + latitude); 
    alert("Longitude: " + longitude); 
}); 

$.get("http://freegeoip.net/json/", function (response) { 
 
    $("#ip").html("IP: " + response.ip); 
 
    $("#address").html("Location: " + response.city + ", " + response.region_name); 
 
    $("#details").html(JSON.stringify(response, null, 4)); 
 
}, "jsonp");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h3>Client side IP geolocation using <a href="http://freegeoip.net">freegeoip.net</a></h3> 
 

 
<hr/> 
 
<div id="ip"></div> 
 
<div id="address"></div> 
 
<hr/>Full response: <pre id="details"></pre>

+0

在https下工作,像ipinfo.io这样的其他选择被支付。谢谢! –

0

这可能与https://ip-api.io地理位置API。它提供国家,城市,邮政编码,坐标,网络,ASN,时区。例如用jQuery:

$(document).ready(function() { 
    $.getJSON("http://ip-api.io/api/json", 
     function(data){ 
      console.log(data); 
     } 
    ); 
}); 

另外https://ip-api.io检查TOR,公共代理和垃圾邮件发送者的数据库,并提供这个信息,以及。

实施例响应:

{ 
    "ip": "182.35.213.213", 
    "country_code": "US", 
    "country_name": "United States", 
    "region_code": "CA", 
    "region_name": "California", 
    "city": "San Francisco", 
    "zip_code": "94107", 
    "time_zone": "America/Los_Angeles", 
    "latitude": 32.7697, 
    "longitude": -102.3933, 
    "suspicious_factors": { 
    "is_proxy": true, 
    "is_tor_node": true, 
    "is_spam": true, 
    "is_suspicious": true // true if any of other fields (is_proxy, is_tor_node, is_spam) is true 
    } 
} 
0

创建的https://ipdata.co提供了坚实的解决这个,请参阅下面拨弄发挥它。它返回许多有用的数据点,如 - 位置:国家(名称和代码),地区,城市等,电子商务 - currency_code,货币符号和时区。

Ipdata有10个全局端点,每个端点每天能够处理大于800M的请求。

$.get("https://api.ipdata.co", function (response) { 
 
    $("#ip").html("IP: " + response.ip); 
 
    $("#city").html(response.city + ", " + response.region); 
 
    $("#response").html(JSON.stringify(response, null, 4)); 
 
}, "jsonp");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1><a href="https://ipdata.co">ipdata.co</a> - IP geolocation API</h1> 
 

 
<div id="ip"></div> 
 
<div id="city"></div> 
 
<pre id="response"></pre>

见小提琴在肯定http://jsfiddle.net/zK5FN/3074/