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 to uzyskać, jest użycie interfejsu API odwrotnej geolokalizacji. Czytałem dokumentację Google dotyczącą odwrotnej geolokalizacji, ale nie wiem, jak uzyskać dane wyjściowe w mojej witrynie.
Nie wiem, jak to zrobić: "http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+long+'&sensor=true"
aby wyświetlić nazwę miasta na stronie.
Jak mogę to osiągnąć?
javascript
html
geolocation
lisovaccaro
źródło
źródło
Odpowiedzi:
Zrobiłbyś coś takiego za pomocą Google API.
Pamiętaj, że aby to działało, musisz dołączyć bibliotekę map Google. Geocoder Google zwraca wiele składników adresu, więc musisz zgadnąć, który z nich będzie miał miasto.
„Administrative_area_level_1” jest zwykle tym, czego szukasz, ale czasami miejscowość to miasto, którego szukasz.
Tak czy inaczej - więcej szczegółów na temat typów odpowiedzi Google można znaleźć tutaj i tutaj .
Poniżej kod, który powinien załatwić sprawę:
źródło
Innym podejściem do tego jest użycie mojej usługi http://ipinfo.io , która zwraca nazwę miasta, regionu i kraju na podstawie aktualnego adresu IP użytkownika. Oto prosty przykład:
Oto bardziej szczegółowy przykład JSFiddle, który również drukuje pełne informacje o odpowiedzi, dzięki czemu możesz zobaczyć wszystkie dostępne szczegóły: http://jsfiddle.net/zK5FN/2/
źródło
Korzystanie z geolokalizacji html5 wymaga zgody użytkownika. Jeśli tego nie chcesz, przejdź do zewnętrznego lokalizatora, takiego jak https://geolocation-db.com IPv6 jest obsługiwany. Brak ograniczeń i nieograniczona liczba żądań.
Przykład
Aby zapoznać się z czystym przykładem JavaScript, bez użycia jQuery, sprawdź tę odpowiedź.
źródło
Możesz uzyskać nazwę miasta, kraju, nazwę ulicy i inne dane geograficzne za pomocą Google Maps Geocoding API
i wyświetlić te dane na stronie za pomocą jQuery
źródło
Oto zaktualizowana wersja robocza dla mnie, która otrzyma Miasto / Miasto, Wygląda na to, że niektóre pola są zmodyfikowane w odpowiedzi json. Nawiązując do poprzednich odpowiedzi na to pytanie. (Podziękowania dla Michała i jeszcze jednej referencji: Link
źródło
geolocator.js może to zrobić. (Jestem autorem).
Pobieranie nazwy miasta (ograniczony adres)
Pobieranie pełnych informacji adresowych
Poniższy przykład najpierw spróbuje API geolokalizacji HTML5, aby uzyskać dokładne współrzędne. Jeśli się nie powiedzie lub zostanie odrzucone, powróci do wyszukiwania Geo-IP. Po uzyskaniu współrzędnych odwróci współrzędne geokodują do adresu.
Wykorzystuje wewnętrznie interfejsy API Google (do wyszukiwania adresów). Dlatego przed tym wywołaniem należy skonfigurować geolokalizator za pomocą klucza Google API.
Geolocator obsługuje geolokalizację (przez wyszukiwanie HTML5 lub IP), geokodowanie, wyszukiwanie adresów (odwrotne geokodowanie), odległość i czas trwania, informacje o strefie czasowej i wiele innych funkcji ...
źródło
Po kilku poszukiwaniach i złożeniu kilku różnych rozwiązań wraz z własnymi rzeczami, wymyśliłem tę funkcję:
źródło
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 serwerem proxy lub spamerem.
Kod JavaScript:
Kod HTML
Wyjście JSON
źródło
Jak wspomniał @PirateApp w swoim komentarzu, używanie interfejsu API Map zgodnie z zamierzeniami jest jednoznacznie sprzeczne z licencjonowaniem interfejsu API Map Google.
Masz wiele alternatyw, w tym pobieranie bazy danych Geoip i wysyłanie do niej zapytań lokalnie lub za pomocą usługi API innej firmy, takiej jak moja usługa ipdata.co .
ipdata podaje geolokalizację, organizację, walutę, strefę czasową, kod wywoławczy, flagę i dane o stanie węzła wyjściowego Tor z dowolnego adresu IPv4 lub IPv6.
I jest skalowalny dzięki 10 globalnym punktom końcowym, z których każdy może obsłużyć ponad 10 000 żądań na sekundę!
Skrzypce; https://jsfiddle.net/ipdata/6wtf0q4g/922/
źródło
Oto kolejne podejście do tego… Dodanie więcej do zaakceptowanej odpowiedzi, być może bardziej kompleksowej… oczywiście przełączniki sprawią, że będzie wyglądać elegancko.
źródło
Oto prosta funkcja, której możesz użyć, aby to uzyskać. Użyłem axios do wykonania żądania API, ale możesz użyć czegokolwiek innego.
źródło