Html5ジオロケーションを使用して、ユーザーの緯度と経度を取得することができました。
//Check if browser supports W3C Geolocation API
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
}
//Get latitude and longitude;
function successFunction(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
}
都市名を表示したいのですが、リバースジオロケーションAPIを使用することが唯一の方法です。 Googleのドキュメントで逆位置情報を読みましたが、自分のサイトで出力を取得する方法がわかりません。
"http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+long+'&sensor=true"
を使ってページに都市名を表示する方法はわかりません。
標準的な方法は何ですか?
あなたはGoogle APIを使ってそのようなことをするでしょう。
これを機能させるには、Googleマップライブラリを含める必要があります。 Googleジオコーダーは多くの住所コンポーネントを返すため、どの都市があるのかについて知識のある推測を行う必要があります。
"administrative_area_level_1"は通常あなたが探しているものですが、時々地域はあなたが後にいる都市です。
とにかく - Googleのレスポンスタイプの詳細は こちら と こちら にあります。
以下はトリックをするべきコードです:
<!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>Reverse Geocoding</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
}
//Get the latitude and the longitude;
function successFunction(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
codeLatLng(lat, lng)
}
function errorFunction(){
alert("Geocoder failed");
}
function initialize() {
geocoder = new google.maps.Geocoder();
}
function codeLatLng(lat, lng) {
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results)
if (results[1]) {
//formatted address
alert(results[0].formatted_address)
//find country name
for (var i=0; i<results[0].address_components.length; i++) {
for (var b=0;b<results[0].address_components[i].types.length;b++) {
//there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
//this is the object you are looking for
city= results[0].address_components[i];
break;
}
}
}
//city data
alert(city.short_name + " " + city.long_name)
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
</script>
</head>
<body onload="initialize()">
</body>
</html>
これに対するもう一つのアプローチは私のサービスを使うことです http://ipinfo.io 、これはユーザーの現在のIPアドレスに基づいて都市、地域および国の名前を返します。これは簡単な例です:
$.get("http://ipinfo.io", function(response) {
console.log(response.city, response.country);
}, "jsonp");
これは完全な応答情報も出力する、より詳細なJSFiddleの例です。したがって、利用可能なすべての詳細を見ることができます。 http://jsfiddle.net/zK5FN/2/
Html5の地理位置情報を使用するには、ユーザー権限が必要です。これを望まないのであれば、 https://geoip-db.com のような外部ロケータを使ってください。IPv6はサポートされています。制限も無制限の要求も許可されていません。
例:
<!DOCTYPE html>
<html>
<head>
<title>GEOIP DB - jQuery example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div>Country: <span id="country"></span>
<div>State: <span id="state"></span>
<div>City: <span id="city"></span>
<div>Latitude: <span id="latitude"></span>
<div>Longitude: <span id="longitude"></span>
<div>IP: <span id="ip"></span>
<script>
$.ajax({
url: "https://geoip-db.com/jsonp",
jsonpCallback: "callback",
dataType: "jsonp",
success: 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>
純粋なjavascriptの例については、jQueryを使わずに、 this answerをチェックしてください。
これは市/町を取得します私のために更新された作業バージョンです、それはいくつかのフィールドがJSON応答で変更されているように見えます。この質問に対する以前の回答を参照してください。 (Michalともう1つの参考資料に感謝します: Link
var geocoder;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
}
// Get the latitude and the longitude;
function successFunction(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
codeLatLng(lat, lng);
}
function errorFunction() {
alert("Geocoder failed");
}
function initialize() {
geocoder = new google.maps.Geocoder();
}
function codeLatLng(lat, lng) {
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({latLng: latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
var arrAddress = results;
console.log(results);
$.each(arrAddress, function(i, address_component) {
if (address_component.types[0] == "locality") {
console.log("City: " + address_component.address_components[0].long_name);
itemLocality = address_component.address_components[0].long_name;
}
});
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
Google Maps Geocoding APIを使用して、都市、国、通りの名前などの地理データの名前を取得できます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
</head>
<body>
<script type="text/javascript">
navigator.geolocation.getCurrentPosition(success, error);
function success(position) {
console.log(position.coords.latitude)
console.log(position.coords.longitude)
var GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + '%2C' + position.coords.longitude + '&language=en';
$.getJSON(GEOCODING).done(function(location) {
console.log(location)
})
}
function error(err) {
console.log(err)
}
</script>
</body>
</html>
jQueryを使ってこのデータをページに表示する
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
</head>
<body>
<p>Country: <span id="country"></span></p>
<p>State: <span id="state"></span></p>
<p>City: <span id="city"></span></p>
<p>Address: <span id="address"></span></p>
<p>Latitude: <span id="latitude"></span></p>
<p>Longitude: <span id="longitude"></span></p>
<script type="text/javascript">
navigator.geolocation.getCurrentPosition(success, error);
function success(position) {
var GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + '%2C' + position.coords.longitude + '&language=en';
$.getJSON(GEOCODING).done(function(location) {
$('#country').html(location.results[0].address_components[5].long_name);
$('#state').html(location.results[0].address_components[4].long_name);
$('#city').html(location.results[0].address_components[2].long_name);
$('#address').html(location.results[0].formatted_address);
$('#latitude').html(position.coords.latitude);
$('#longitude').html(position.coords.longitude);
})
}
function error(err) {
console.log(err)
}
</script>
</body>
</html>
geolocator.js できます。 (私は作者です)。
市区町村名(限定住所)の取得
geolocator.locateByIP(options, function (err, location) {
console.log(location.address.city);
});
完全な住所情報を取得する
以下の例では、まず正確な座標を取得するためにHTML5 Geolocation APIを試します。失敗または拒否された場合は、Geo-IP検索にフォールバックします。座標を取得すると、座標を住所に逆ジオコーディングします。
var options = {
enableHighAccuracy: true,
fallbackToIP: true, // fallback to IP if Geolocation fails or rejected
addressLookup: true
};
geolocator.locate(options, function (err, location) {
console.log(location.address.city);
});
これはGoogleのAPIを内部的に使用しています(アドレス参照用)。そのため、この電話をかける前に、Google APIキーを使用してgeolocatorを設定する必要があります。
geolocator.config({
language: "en",
google: {
version: "3",
key: "YOUR-GOOGLE-API-KEY"
}
});
Geolocator (HTML5またはIPルックアップを介した)ジオロケーション、ジオコーディング、住所検索(リバースジオコーディング)、距離をサポート&期間、タイムゾーン情報、その他多数の機能...
いくつかの検索と自分のものと一緒にいくつかの異なるソリューションをつなぎ合わせた後、私はこの機能を思い付きました:
function parse_place(place)
{
var location = [];
for (var ac = 0; ac < place.address_components.length; ac++)
{
var component = place.address_components[ac];
switch(component.types[0])
{
case 'locality':
location['city'] = component.long_name;
break;
case 'administrative_area_level_1':
location['state'] = component.long_name;
break;
case 'country':
location['country'] = component.long_name;
break;
}
};
return location;
}
都市名を取得するには https://ip-api.io/ を使用できます。 IPv6に対応しています。
ボーナスとして、それはIPアドレスがTorノード、パブリックプロキシ、またはスパマーであるかどうかをチェックすることを可能にします。
Javascriptコード:
$(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('City Name: ' + result.city)
console.log(result);
});
});
});
HTMLコード
<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>
JSON出力
{
"ip": "64.30.228.118",
"country_code": "US",
"country_name": "United States",
"region_code": "FL",
"region_name": "Florida",
"city": "Fort Lauderdale",
"Zip_code": "33309",
"time_zone": "America/New_York",
"latitude": 26.1882,
"longitude": -80.1711,
"metro_code": 528,
"suspicious_factors": {
"is_proxy": false,
"is_tor_node": false,
"is_spam": false,
"is_suspicious": false
}
}
@PirateAppが彼のコメントで述べたように、意図したとおりにMaps APIを使用することは、明らかにGoogleのMaps APIライセンスに違反しています。
Geoipデータベースをダウンロードしてローカルでクエリを実行する方法や、my service ipdata.co のようなサードパーティのAPIサービスを使用する方法など、さまざまな方法があります。
ipdataはあなたにどんなIPv4またはIPv6アドレスからの地理位置、組織、通貨、タイムゾーン、呼び出しコード、フラグとTor出口ノードステータスデータを与えます。
また、1秒あたり10,000を超える要求を処理できる10個のグローバルエンドポイントで拡張性があります。
この回答では、「テスト」APIキーを使用していますが、これは非常に限られており、ほんの数回の呼び出しをテストするためのものです。あなた自身の無料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>
ここでそれをもう一度試してみましょう..もちろんより包括的..承認された答えにもっと追加..スイッチケースはそれがエレガントに見えるようになります。
function parseGeoLocationResults(result) {
const parsedResult = {}
const {address_components} = result;
for (var i = 0; i < address_components.length; i++) {
for (var b = 0; b < address_components[i].types.length; b++) {
if (address_components[i].types[b] == "street_number") {
//this is the object you are looking for
parsedResult.street_number = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "route") {
//this is the object you are looking for
parsedResult.street_name = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "sublocality_level_1") {
//this is the object you are looking for
parsedResult.sublocality_level_1 = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "sublocality_level_2") {
//this is the object you are looking for
parsedResult.sublocality_level_2 = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "sublocality_level_3") {
//this is the object you are looking for
parsedResult.sublocality_level_3 = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "neighborhood") {
//this is the object you are looking for
parsedResult.neighborhood = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "locality") {
//this is the object you are looking for
parsedResult.city = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "administrative_area_level_1") {
//this is the object you are looking for
parsedResult.state = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "postal_code") {
//this is the object you are looking for
parsedResult.Zip = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "country") {
//this is the object you are looking for
parsedResult.country = address_components[i].long_name;
break;
}
}
}
return parsedResult;
}