web-dev-qa-db-ja.com

許可を求めずにユーザーの場所を取得するにはどうすればよいですか、またはユーザーが一度許可したため、二度と尋ねる必要がない場合はどうすればよいですか？

MySQL、JavaScript、Ajaxを使用してポータルを作成しており、ユーザーの位置を緯度と経度で取得したいと考えています。確認せずに場所を取得することが不可能な場合は、ユーザーが許可を与えると、もう一度質問せずに任意のページから場所を取得できます。

前もって感謝します。

javascriptphplatitude-longitude
14
user3406221

この回答でこれを行う3つの方法：

  1. ユーザーにブラウザのAPIへのアクセスを許可するように求めるGPSの正確な位置を取得する
  2. 外部のGeoIPサービスを使用しておおよその場所（国、都市、エリア）を取得する
  3. CDNサービスを使用しておおよその場所（国、都市、地域）を取得する

ブラウザのAPIへのアクセスを許可するようにユーザーに依頼する

HTML5機能を使用してクライアントの場所を取得できます。これは、GPSを備えたデバイスから行われた場合のユーザーの正確な位置、またはおおよその位置を取得します。ユーザーが現在地の共有を承認すると、それ以上の承認なしにその場所を取得できます。このソリューションでは Geolocation.getCurrentPosition（） を使用します。ほとんどの場合、HTTPSプロトコルでこれを行う必要があります。

あなたが急いでいるなら、ここにこの解決策のCodePenがあります： https://codepen.io/sebastienfi/pen/pqNxEa

<!DOCTYPE html>
<html>
<body>

<p id="demo">Click the button to get your coordinates:</p>

<button onclick="getLocation()">Try It</button>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            // Success function
            showPosition, 
            // Error function
            null, 
            // Options. See MDN for details.
            {
               enableHighAccuracy: true,
               timeout: 5000,
               maximumAge: 0
            });
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    x.innerHTML="Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;  
}
</script>

</body>
</html>

エラーと拒否の処理getCurrentPosition（）メソッドの2番目のパラメータは、エラーの処理に使用されます。ユーザーの場所の取得に失敗した場合に実行する関数を指定します。

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}

結果をマップに表示する

function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;

    var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=
    "+latlon+"&zoom=14&size=400x300&sensor=false";

    document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

GeoIP

上記のソリューションがシナリオで機能しない場合は、IPの場所を使用しておおよその位置を取得できます。ユーザーの正確な場所を取得できるとは限りませんが、ユーザーの接続ポイントエリア内の最も近いインターネットノードの場所になる場合があります。これは、ユースケース（国、都市、エリア）の99％に十分近い可能性があります。 。

これは正確ではありませんが、ユーザーの承認を必要としないため、これも要件を満たす場合があります。

これを行う2つの方法を以下に示します。 CDNソリューションを使用してこれを実行することをお勧めします。これは高速であり、速度が非常に重要であるためです。

外部のGeoIPサービスを使用しておおよその場所（国、都市、エリア）を取得する

多くの外部サービスでは、GeoIPの場所を取得できます。これがGoogleの例です。

Google APIキーを取得するには、こちらにアクセスしてください https://developers.google.com/loader/signup?csw=1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Get web visitor's location</title>
        <meta name="robots" value="none" />
    </head>
    <body>
    <div id="yourinfo"></div>
    <script type="text/javascript" src="http://www.google.com/jsapi?key=<YOUR_GOOGLE_API_KEY>"></script>
    <script type="text/javascript">
        if(google.loader.ClientLocation)
        {
            visitor_lat = google.loader.ClientLocation.latitude;
            visitor_lon = google.loader.ClientLocation.longitude;
            visitor_city = google.loader.ClientLocation.address.city;
            visitor_region = google.loader.ClientLocation.address.region;
            visitor_country = google.loader.ClientLocation.address.country;
            visitor_countrycode = google.loader.ClientLocation.address.country_code;
            document.getElementById('yourinfo').innerHTML = '<p>Lat/Lon: ' + visitor_lat + ' / ' + visitor_lon + '</p><p>Location: ' + visitor_city + ', ' + visitor_region + ', ' + visitor_country + ' (' + visitor_countrycode + ')</p>';
        }
        else
        {
            document.getElementById('yourinfo').innerHTML = '<p>Whoops!</p>';
        }
    </script>
    </body>
</html>

CDNサービスを使用しておおよその場所（国、都市、地域）を取得する

外部サービスを使用する代わりに、ほとんどのCDNが提供しています。このソリューションの利点は、追加のHTTPリクエストが必要ないため高速です。すでにCDNをお持ちの場合、これが最適な方法です。 CloudFlare、CloudFrontなどを使用できます。

このシナリオでは、ほとんどの場合、HTTPリクエストのヘッダーのパラメーターとして、またはJavaScriptで取得できるようにウィンドウオブジェクト内で直接場所を取得します。詳細については、CDNのドキュメントをご覧ください。

2018年12月中旬に編集され、オプションが追加されました。

25
Sébastien

https://www.geolocation-db.com のような外部サービスを利用できます。ユーザーの許可を必要としないIPアドレスに基づく地理位置情報サービスを提供します。

この例を試してください：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Geo City Locator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body> 
    <div>Country: <span id="country"></span></div>
    <div>State: <span id="state"></span></div>
    <div>City: <span id="city"></span></div>
    <div>Latitude: <span id="latitude"></span></div>
    <div>Longitude: <span id="longitude"></span></div>
    <div>IP: <span id="ip"></span></div>
    <script>
      $.getJSON('https://geolocation-db.com/json/')
         .done (function(location) {
            $('#country').html(location.country_name);
            $('#state').html(location.state);
            $('#city').html(location.city);
            $('#latitude').html(location.latitude);
            $('#longitude').html(location.longitude);
            $('#ip').html(location.IPv4);
         });
    </script>
</body>
</html>
14
Kurt Van den Branden

WebリクエストのオリジンIPアドレスに基づいて緯度と経度を推測することが可能です。 MaxMindのgeoip（ https://www.maxmind.com/en/geoip-demo ）などの場所にIPをマップするデータベースまたはサービスにアクセスする必要があります。 JavaScript/PHPあなたが利用できるこれらのようなサービスに利用可能なラッパーがあるはずです。

GeoIPルックアップは信頼性が低く、簡単に古くなる可能性があります。より正確なものが必要な場合は、郵便番号など、ユーザーから情報を要求する必要があります。

0
FoolishSeth