Pobierz nazwę miasta za pomocą geolokalizacji [duplikat]

to pytanie ma już odpowiedzi tutaj : Pobieranie lokalizacji z adresu IP [zamknięte] (20 odpowiedzi) Zamknięte 2 miesiące temu .

Udało mi się uzyskać szerokość i długość geograficzną użytkownika za pomocą geolokalizacji opartej na HTML. 

//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;
}

Chcę wyświetlić nazwę miasta, wydaje się, że jedynym sposobem, aby ją uzyskać, jest użycie odwrotnego API geolokalizacji. Czytałem dokumentację Google dla odwrotnej geolokalizacji, ale nie wiem, jak uzyskać wynik na mojej stronie.

Nie wiem jak użyć tego: "http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+long+'&sensor=true" Aby wyświetlić nazwę miasta na stronie.

Jak mogę osiągnąć to?

Author: TylerH, 2011-07-23
Source

12 answers

Zrobiłbyś coś takiego używając Google API.

Pamiętaj, że musisz dołączyć bibliotekę Map google, aby to działało. Google geocoder zwraca wiele składników adresowych, więc musisz się zorientować, który z nich będzie miał miasto.

"administrative_area_level_1" jest zazwyczaj tym, czego szukasz, ale czasami lokalizacja to miasto, którego szukasz.

Tak czy inaczej-więcej szczegółów na temat typów odpowiedzi google można znaleźć tutaj oraz tutaj .

Poniżej znajduje się kod, który powinien zadziałać: 

<!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>
 208
Author: Michal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-29 14:08:04 

$.ajax({
  url: "https://geolocation-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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<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>

Korzystanie z geolokalizacji html5 wymaga zgody użytkownika. Jeśli tego nie chcesz, wybierz zewnętrzny lokalizator, taki jak https://geolocation-db.com {[6] } IPv6 jest obsługiwane. Brak ograniczeń i nieograniczone żądania dozwolone.

Przykład

Dla przykładu czystego javascript, bez użycia jQuery, sprawdź this answer.

 58
Author: Kurt Van den Branden,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-11-09 16:11:57

Innym podejściem do tego jest skorzystanie z moich usług, http://ipinfo.io , która zwraca nazwę miasta, regionu i kraju na podstawie aktualnego adresu IP użytkownika. Oto prosty przykład: 

$.get("http://ipinfo.io", function(response) {
    console.log(response.city, response.country);
}, "jsonp");

Oto bardziej szczegółowy przykład JSFiddle, który wyświetla również pełne informacje o odpowiedzi, dzięki czemu możesz zobaczyć wszystkie dostępne szczegóły: http://jsfiddle.net/zK5FN/2/

 54
Author: Ben Dowling,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-30 03:20:40

Możesz uzyskać nazwę miasta, kraju, ulicy i innych danych geodezyjnych za pomocą interfejsu 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>

I wyświetlanie tych danych na stronie za pomocą 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>
 18
Author: Mikhail,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-29 04:12:07

Tutaj jest zaktualizowana wersja robocza dla mnie, która dostanie miasto/Miasto, wygląda na to, że niektóre pola są modyfikowane w odpowiedzi json. Odsyłając poprzednie odpowiedzi na te pytania. (Podziękowania dla Michala i jeszcze jedno odniesienie: 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);
    }
  });
}
 16
Author: Pradeep,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:34:53

Geolokator.js może to zrobić. (Jestem autorem).

Uzyskanie Nazwy Miasta (Ograniczony Adres) 

geolocator.locateByIP(options, function (err, location) {
    console.log(location.address.city);
});

Uzyskanie Pełnych Informacji Adresowych

Poniższy przykład najpierw spróbuje HTML5 geolocation API, aby uzyskać dokładne współrzędne. Jeśli się nie powiedzie lub zostanie odrzucony, powróci do wyszukiwania Geo-IP. Gdy otrzyma współrzędne, odwróci geokodowanie współrzędnych do adresu.

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);
});

Używa wewnętrznie interfejsów API Google (do wyszukiwania adresów). Więc przed tym wywołaniem należy skonfigurować geolocator za pomocą klucza Google API.

geolocator.config({
    language: "en",
    google: {
        version: "3",
        key: "YOUR-GOOGLE-API-KEY"
    }
});

Geolokator obsługuje geolokalizację (poprzez wyszukiwanie HTML5 lub IP), geokodowanie, wyszukiwanie adresów( odwrotne geokodowanie), odległość i czas trwania, informacje o strefie czasowej i wiele innych funkcji...

 11
Author: Onur Yıldırım,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-29 03:45:19

Po kilku poszukiwaniach i poskładaniu do kupy kilku różnych rozwiązań wraz z własnymi rzeczami, wymyśliłem taką funkcję: 

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;
}
 8
Author: Jafo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-25 14:33:32

Możesz użyć https://ip-api.io / aby uzyskać nazwę miasta. Obsługuje IPv6.

Jako bonus pozwala sprawdzić, czy adres ip jest węzłem tor, publicznym proxy lub spamerem.

Kod 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);
                 });
        });
    });

Kod 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>

Wyjście 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
    }
}
 4
Author: Vindhyachal Kumar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-29 13:58:50

Jak wspomniał @PirateApp w swoim komentarzu, korzystanie z API Maps API jest wyraźnie sprzeczne z licencjami Google.

Masz wiele alternatyw, w tym pobieranie bazy danych Geoip i odpytywanie jej lokalnie lub za pomocą usługi API innej firmy, takiej jak moja usługa ipdata.co .

Ipdata daje dane geolokalizacji, organizacji, waluty, strefy czasowej, kodu wywołującego, flagi i stanu węzła wyjścia Tor z dowolnego adresu IPv4 lub IPv6.

I jest skalowalny z 10 globalnymi punktami końcowymi, z których każdy jest w stanie obsłużyć >10 000 żądań na sekundę!

Ta odpowiedź używa klucza API' test', który jest bardzo ograniczony i przeznaczony tylko do testowania kilku wywołań. Zarejestruj się, aby uzyskać bezpłatny klucz API i uzyskać do 1500 wniosków dziennie do rozwoju.

$.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>

The fiddle; https://jsfiddle.net/ipdata/6wtf0q4g/922/

 3
Author: Jonathan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-05-05 21:58:10

Oto kolejna próba .. Dodanie więcej do zaakceptowanej odpowiedzi, być może bardziej wyczerpującej .. oczywiście switch-case sprawi, że będzie wyglądać elegancko.

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;
}
 1
Author: user3124360,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-24 18:13:30

Alternatywnie możesz skorzystać z moich usług, https://astroip.co[[3]}, jest to nowy API Geolokalizacyjny: 

$.get("https://api.astroip.co/?api_key=1725e47c-1486-4369-aaff-463cc9764026", function(response) {
    console.log(response.geo.city, response.geo.country);
});

AstroIP dostarcza dane geolokalizacyjne wraz z punktami zabezpieczeń, takimi jak proxy, węzły TOR i wykrywanie gąsienic. API zwraca również walutę, strefy czasowe, dane ASN i dane firmy.

Jest to całkiem nowy api ze średnim czasem odpowiedzi 40ms z wielu regionów na całym świecie, co pozycjonuje go na liście super szybkich interfejsów API geolokalizacyjnych dostępny.

Duży darmowy plan do 30 000 zapytań miesięcznie za darmo jest dostępny.

 1
Author: bre_dev,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-12-05 18:36:20

Oto prosta funkcja, której możesz użyć, aby ją uzyskać. Użyłem axios , Aby wysłać żądanie API, ale możesz użyć wszystkiego innego. 

async function getCountry(lat, long) {
  const { data: { results } } = await axios.get(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${long}&key=${GOOGLE_API_KEY}`);
  const { address_components } = results[0];

  for (let i = 0; i < address_components.length; i++) {
    const { types, long_name } = address_components[i];

    if (types.indexOf("country") !== -1) return long_name;
  }
}
 0
Author: Kingsley Kbc Comics,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-19 07:57:28