web-dev-qa-db-ja.com

jQuery / JS（Google Geolocation APIなし）を使用してユーザーの場所を検索しますか？

JQueryだけを使用して、Webサイトでクライアントの場所を見つける方法はありますか。たとえば、ユーザーが私のサイトに来た場合、jQueryを使用しておおよその位置を確認する方法はありますか。たとえば、ユーザーがサンフランシスコCAから来た場合、そのユーザーがサンフランシスコCAから来たことを知らせるための何らかのタイプ識別子があります。オリジンの郡または一般的な地域だけで、彼らの正確な位置は本当に必要ありません。

編集： http://flourishworks-webutils.appspot.com/req の情報はどのように生成されますか？

ありがとう

javascriptjqueryunobtrusive-javascript
29
user1530249

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>
40
Durgesh Pandey

私のサービス http://ipinfo.io など、JSONPをサポートするWebサービスを使用できます。クライアントの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/

24
Ben Dowling

HTML5 Geolocation API を使用すると、JavaScriptを使用してユーザーの緯度/経度を取得できます（ブラウザーに互換性があり、ユーザーが自分の場所へのアクセスを許可している場合）。

次に、 reverse-geocode 住所を取得する場所を指定できます。GoogleのAPI以外のサービスがいくつかあります free reverse-geocoding .

ただし、正確な位置情報を必要とせず、すべてのユーザーに（ブラウザに関係なく）この機能を利用させたい場合、およびサイトに位置情報を許可するかどうかを尋ねたくない場合、 ユーザーのIPを使用して場所を取得する をお勧めします。

13
Julien

ipdata.co APIを作成して、これに対する強固なソリューションを提供します。以下のフィドルをご覧ください。 -場所：国（名前とコード）、地域、都市など、eコマース-通貨コード、通貨記号、タイムゾーン、携帯電話会社データなど、多数の有用なデータポイントを返し、IPアドレスがプロキシユーザーかTorユーザーかを検出します。

Ipdataには10個のグローバルエンドポイントがあり、それぞれが1秒あたり10,000を超えるリクエストを処理できます。

この回答では、「テスト」APIキーを使用していますが、これは非常に限定されており、数回の呼び出しをテストするためだけのものです。 Signup 独自の無料APIキーの場合、開発のために毎日最大1500件のリクエストを受け取ります。

$.get("https://api.ipdata.co?api-key=test", 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>

https://jsfiddle.net/ipdata/6wtf0q4g/922/ のフィドルをご覧ください

7
Jonathan
**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>
3
Ashutosh Tiwari

クライアント側のオプションは、周囲のワイヤレスネットワークに基づいてコンピューターによって提供されるため、良いアイデアではありません。私は、デスクトップユーザーの90％がこの機能を有効にしていないと確信しています。あなたの場所が欲しいウェブサイトに着いたら、同意するためにボタンをクリックする必要があります。彼らがあなたのウェブサイトにアクセスしたばかりの場合、彼らはあなたが彼らの場所を必要とする理由を最初に知りたいです。

良い方法は、場所を必要とする理由と、指定した目的以外の目的に使用しないこと、および場所がデータベースに保存されないことを知らせるページを表示することです。

サーバー側を実行するスクリプトがある場合、クライアントからサーバーへの接続があります。この場合、サーバーはIPアドレスを知っている必要があります。最初にIPアドレスを取得するためにできるコツがあります。

サーバーでphpスクリプトを作成します。これにより、IPアドレスのみが返されます。 jqueryはローカルで処理されるため、サーバーに接続すると、クライアントのIPアドレスが公開されます。必要な接続を確立するにはさらに時間がかかりますが、すぐにjQueryでIPアドレスが使用可能になります。

次に、jqueryを介して、特定のIPアドレスの情報を提供する外部APIを呼び出すことができます。 IPデータベースを購入してWebサーバーにインストールして呼び出すことができるか、別のAPIを使用します。確認できます http://www.ipgp.net/ip-address-geolocation-api/

1
Lucian

これは https://ip-api.io geo location 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
  }
}
1
Andrey E