Теперь о том, как что работает.
Данные берутся из GET запроса по адресу: http://ip-api.com/json/ для текущего IP, http://ip-api.com/json/208.80.152.201 для конкретного или http://ip-api.com/json/atuin.ru для домена.
Для получения данных на русском языке используем запрос: http://ip-api.com/json/?lang=ru
Успешный результат вернет данные:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ "status": "success", "country": "COUNTRY", "countryCode": "COUNTRY CODE", "region": "REGION CODE", "regionName": "REGION NAME", "city": "CITY", "zip": "ZIP CODE", "lat": LATITUDE, "lon": LONGITUDE, "timezone": "TIME ZONE", "isp": "ISP NAME", "org": "ORGANIZATION NAME", "as": "AS NUMBER / NAME", "query": "IP ADDRESS USED FOR QUERY" } |
Ошибочный:
|
1 2 3 4 5 |
{ "status": "fail", "message": "ERROR MESSAGE", "query": "IP ADDRESS USED FOR QUERY" } |
Пример использования с jQuery (от разработчика):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>IP-API.com Geo Location Demo</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head> <body> <table id="GeoResults"></table> <script> $.getJSON("http://ip-api.com/json/?callback=?", function(data) { var table_body = ""; $.each(data, function(k, v) { table_body += "<tr><td>" + k + "</td><td><b>" + v + "</b></td></tr>"; }); $("#GeoResults").html(table_body); }); </script> </body> </html> |
Пример использования с jQuery и Google Maps (от меня):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!doctype html> <html> <title>ATUIN</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="//code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script> <script src="//maps.google.com/maps/api/js?sensor=false"></script> <body> <h3 class="title">Привет, <span class="city"></span> !</h3> <p>Для просмотра информации нажмите значок на карте.</p> <script> $.getJSON("//ip-api.com/json/?lang=ru", function(data) { var data_body = ""; $.each(data, function(k, v) { data_body += "<b>" + k + "</b> : <i>" + v + "</i><br />"; }); $(".city").html(data.city); // Google Map var locations = [ [data_body, data.lat, data.lon, 2] //Данные из IP API ]; var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, scrollwheel: false, navigationControl: true, mapTypeControl: false, scaleControl: false, draggable: false, styles: [ { "stylers": [ { "hue": "#477ab9" }, {saturation: 20}, {gamma: 1} ] } ], center: new google.maps.LatLng(data.lat, data.lon), //Данные координат из IP API mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow(); var marker, i; for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map , icon: '/images/A1.png' }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } $(document).on( "shown.bs.tab", function( event, data ){ var center = map.getCenter(); google.maps.event.trigger(map, "resize"); map.setCenter(center); }); }); </script> <div id="map" style="width: 100%; height: 600px;"></div> </body> </html> |
К сожалению, данный сайт не работает по протоколу https, поэтому демо временно не работает.
Более подробную информацию можно найти в документации на сайте разработчика: ip-api.com
здраствуйте, как можно отдельно получить ширину и долготу?
Они и идут отдельно:
"lat": LATITUDE, "lon": LONGITUDE,Частенько глючит сервис этот, висит 🙁