2013-01-05 70 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/