☰

許可を求めずにユーザーの位置情報を取得するにはどうすればいいですか? または、ユーザーが一度許可すれば、二度と尋ねる必要がなくなりますか? 質問する

tag-icon • tag-icon javascript php latitude-longitude
許可を求めずにユーザーの位置情報を取得するにはどうすればいいですか? または、ユーザーが一度許可すれば、二度と尋ねる必要がなくなりますか? 質問する

私は MySQL、JavaScript、Ajax を使用してポータルを作成しており、緯度と経度でユーザーの位置を取得したいと考えています。尋ねることなく位置を取得できない場合は、ユーザーが許可を与えると、二度と尋ねることなくどのページからでも位置を取得できます。

前もって感謝します。

ベストアンサー1

この回答では、これを行う 3 つの方法を示します。

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

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

HTML5の機能を使用してクライアントの位置を取得できます。GPSを搭載したデバイスから実行した場合は、ユーザーの正確な位置、またはおおよその位置を取得できます。ユーザーが位置情報の共有を承認すると、それ以上の承認なしで位置情報を取得できます。このソリューションでは、位置情報.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+"'>";
}

ジオIP

上記のソリューションがシナリオで機能しない場合は、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 リクエストのヘッダーのパラメータとして場所を指定するか、または window オブジェクトに直接場所を指定して、Javascript で取得できるようにする可能性が高くなります。詳細については、CDN のドキュメントをお読みください。

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

おすすめ記事