web-dev-qa-db-ja.com

位置情報を使用して訪問者の位置(国)を取得する方法は?

ネイティブのジオロケーション機能を拡張しようとしています

if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
    });
}

訪問者の国名を使用できるように(おそらく有益な配列を返します)。

これまでのところ、Googleマップインターフェースを表示する関数しか見つけることができませんでしたが、 このライブラリ を除いて、実際に必要なものを提供する関数はありませんでしたこの例ではですが、何らかの理由でコンピューターで動作しませんでした。なぜそこで失敗したのかはわかりません。

とにかく、緯度と経度の値から国、都市などの情報を含む配列を単純に返す方法を知っていますか?

81
Gal

ユーザーの国のみが必要な場合は、ユーザーを見つける必要はありません。 IP-to-locationサービス( maxmind など)でIPアドレスを検索できます。これはほとんどの場合正確です。

本当に位置情報を取得する必要がある場合は、そのメソッドで緯度/経度を取得し、 Google's または Yahoo's リバースジオコーディングサービスにクエリを実行できます。

31
Galen

これには、私のサービス http://ipinfo.io を使用できます。クライアントIP、ホスト名、位置情報(都市、地域、国、市外局番、郵便番号など)およびネットワーク所有者を提供します。以下は、都市と国を記録する簡単な例です。

$.get("https://ipinfo.io", function(response) {
    console.log(response.city, response.country);
}, "jsonp");

完全な応答情報も出力する、より詳細なJSFiddleの例は次のとおりです。そのため、利用可能なすべての詳細を確認できます。 http://jsfiddle.net/zK5FN/2/

通常、場所はネイティブの地理的位置の詳細よりも精度が低くなりますが、ユーザーの許可は必要ありません。

177
Ben Dowling

IPアドレスを使用して、「国」、「都市」、「ISP」などを取得できます。
http://ip-api.com のようなシンプルなAPIを提供するWebサービスのいずれかを使用するだけで、 http: //ip-api.com/json 。 Ajax(またはXhr)リクエストを送信し、JSONを解析して必要なデータを取得するだけです。

var requestUrl = "http://ip-api.com/json";

$.ajax({
  url: requestUrl,
  type: 'GET',
  success: function(json)
  {
    console.log("My country is: " + json.country);
  },
  error: function(err)
  {
    console.log("Request failed, error= " + err);
  }
});
20
Gil Epshtain

ipdata.co を参照してください。10個のグローバルエンドポイントがそれぞれ1秒あたり10,000を超えるリクエストを処理できるため、高速で信頼性の高いパフォーマンスが得られます。

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

このスニペットは、currentIPの詳細を返します。他のIPアドレスを検索するには、単にIPを https://api.ipdata.co?api-key=test urlに追加します。

https://api.ipdata.co/1.1.1.1?api-key=test

APIは、ユーザーがEUの国にいるかどうかを示すis_euフィールドも提供します。

$.get("https://api.ipdata.co?api-key=test", function (response) {
    $("#response").html(JSON.stringify(response, null, 4));
}, "jsonp");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id="response"></pre>

ここにフィドルがあります。 https://jsfiddle.net/ipdata/6wtf0q4g/922/

this 8つのIP Geolocation APIの詳細な分析も書きました。

12
Jonathan

ws.geonames.orgにより、非常に使いやすいサービスが提供されます。 URLの例を次に示します。

http://ws.geonames.org/countryCode?lat=43.7534932&lng=28.5743187&type=JSON

コードに追加した(jQuery)コードは次のとおりです。

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        $.getJSON('http://ws.geonames.org/countryCode', {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
            type: 'JSON'
        }, function(result) {
            alert('Country: ' + result.countryName + '\n' + 'Code: ' + result.countryCode);
        });
    });
}​

jsfiddle.net ...で試してみてください

9
hippietrail

iPで都市の場所を取得することはできません。ここで、jqueryで国を取得できます。

$.get("http://ip-api.com/json", function(response) {
console.log(response.country);}, "jsonp");
9
anmml

無料の使いやすいサービスが Webtechriser(記事を読むにはここをクリック)wipmania と呼ばれます)で提供されています。これはJSONPサービスであり、プレーンjavascriptコーディングが必要ですHTMLJQueryでも使用できます。出力形式を変更するためにコードを少し変更しましたが、これは私が使用し、機能していることがわかったものです(私のHTMLページのコードです)

<html>
    <body>
        <p id="loc"></p>


        <script type="text/javascript">
            var a = document.getElementById("loc");

                    function jsonpCallback(data) { 
                    a.innerHTML = "Latitude: " + data.latitude + 
                              "<br/>Longitude: " + data.longitude + 
                              "<br/>Country: " + data.address.country; 
                    }
        </script>
        <script src="http://api.wipmania.com/jsonp?callback=jsonpCallback"
                     type="text/javascript"></script>


    </body>
</html>

ご注意:このサービスは、訪問者の位置を取得しますwithoutHTML 5ジオロケーションAPI(作成したコード)とは異なり、訪問者が自分の位置を共有するかどうかを選択します。したがって、プライバシーが侵害されます。したがって、このサービスを司法で使用する必要があります。

3
user5794376

フル機能のジオロケーションユーティリティを探している開発者は、 geolocator.js (私は著者です)を見ることができます。

以下の例では、最初にHTML5 Geolocation APIを試し、正確な座標を取得します。失敗または拒否された場合、Geo-IPルックアップにフォールバックします。座標を取得すると、その座標をアドレスに逆ジオコーディングします。

var options = {
    enableHighAccuracy: true,
    timeout: 6000,
    maximumAge: 0,
    desiredAccuracy: 30,
    fallbackToIP: true, // if HTML5 geolocation fails or rejected
    addressLookup: true, // get detailed address information
    timezone: true, 
    map: "my-map" // this will even create a map for you
};

geolocator.locate(options, function (err, location) {
    console.log(err || location);
});

ジオロケーション(HTML5またはIPルックアップ経由)、ジオコーディング、住所検索(逆ジオコーディング)、距離と期間、タイムゾーン情報などをサポートしています。

2

ip-api.io を使用して、訪問者の位置を取得できます。 IPv6をサポートしています。

ボーナスとして、IPアドレスがtorノード、パブリックプロキシ、またはスパマーであるかどうかを確認できます。

JavaScriptコード:

function getIPDetails() {
    var ipAddress = document.getElementById("txtIP").value;

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            console.log(JSON.parse(xhttp.responseText));
        }
    };
    xhttp.open("GET", "http://ip-api.io/json/" + ipAddress, true);
    xhttp.send();
}

<input type="text" id="txtIP" placeholder="Enter the ip address" />
<button onclick="getIPDetails()">Get IP Details</button>

jQueryコード:

$(document).ready(function () {
        $('#btnGetIpDetail').click(function () {
            if ($('#txtIP').val() == '') {
                alert('IP address is reqired');
                return false;
            }
            $.getJSON("http://ip-api.io/json/" + $('#txtIP').val(),
                 function (result) {
                     alert('Country Name: ' + result.country_name)
                     console.log(result);
                 });
        });
    });

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div>
    <input type="text" id="txtIP" />
    <button id="btnGetIpDetail">Get Location of IP</button>
</div>
2