ネイティブのジオロケーション機能を拡張しようとしています
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
});
}
訪問者の国名を使用できるように(おそらく有益な配列を返します)。
これまでのところ、Googleマップインターフェースを表示する関数しか見つけることができませんでしたが、 このライブラリ を除いて、実際に必要なものを提供する関数はありませんでしたこの例ではですが、何らかの理由でコンピューターで動作しませんでした。なぜそこで失敗したのかはわかりません。
とにかく、緯度と経度の値から国、都市などの情報を含む配列を単純に返す方法を知っていますか?
これには、私のサービス http://ipinfo.io を使用できます。クライアントIP、ホスト名、位置情報(都市、地域、国、市外局番、郵便番号など)およびネットワーク所有者を提供します。以下は、都市と国を記録する簡単な例です。
$.get("https://ipinfo.io", function(response) {
console.log(response.city, response.country);
}, "jsonp");
完全な応答情報も出力する、より詳細なJSFiddleの例は次のとおりです。そのため、利用可能なすべての詳細を確認できます。 http://jsfiddle.net/zK5FN/2/
通常、場所はネイティブの地理的位置の詳細よりも精度が低くなりますが、ユーザーの許可は必要ありません。
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);
}
});
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の詳細な分析も書きました。
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);
});
});
}
iPで都市の場所を取得することはできません。ここで、jqueryで国を取得できます。
$.get("http://ip-api.com/json", function(response) {
console.log(response.country);}, "jsonp");
無料の使いやすいサービスが Webtechriser(記事を読むにはここをクリック) ( wipmania と呼ばれます)で提供されています。これはJSONPサービスであり、プレーンjavascriptコーディングが必要ですHTML。 JQueryでも使用できます。出力形式を変更するためにコードを少し変更しましたが、これは私が使用し、機能していることがわかったものです(私の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(作成したコード)とは異なり、訪問者が自分の位置を共有するかどうかを選択します。したがって、プライバシーが侵害されます。したがって、このサービスを司法で使用する必要があります。
フル機能のジオロケーションユーティリティを探している開発者は、 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ルックアップ経由)、ジオコーディング、住所検索(逆ジオコーディング)、距離と期間、タイムゾーン情報などをサポートしています。
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>