Dapatkan nama kota menggunakan geolokasi

140

Saya berhasil mendapatkan garis lintang dan bujur pengguna menggunakan geolokasi berbasis 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;
}

Saya ingin menampilkan nama kota, sepertinya satu-satunya cara untuk mendapatkannya adalah dengan menggunakan API geolokasi terbalik. Saya membaca dokumentasi Google untuk geolokasi terbalik, tetapi saya tidak tahu bagaimana mendapatkan output di situs saya.

Saya tidak tahu bagaimana cara menggunakan ini: "http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+long+'&sensor=true"untuk menampilkan nama kota pada halaman.

Bagaimana saya bisa mencapai ini?

javascript  html  geolocation 
— lisovaccaro
sumber
4
Jika Anda tidak akan menggunakan peta, Anda TAHU ini bertentangan dengan TOS Google, bukan? Poin 10.4 di sini developers.google.com/maps/terms Tidak ada penggunaan Konten tanpa peta Google. Kecuali Dokumentasi Maps APIs secara tegas mengizinkan Anda untuk melakukannya, Anda tidak akan menggunakan Konten dalam Implementasi Maps Maps tanpa Google map yang sesuai. Misalnya, Anda dapat menampilkan citra Street View tanpa peta Google yang sesuai karena Dokumentasi Maps APIs secara tegas mengizinkan penggunaan ini.
— PirateApp
5
Ya, @PirateApp memiliki poin bagus. Mungkin ada layanan yang lebih baik di luar sana. Saya telah bekerja dengan SmartyStreets sebelumnya dan saya tahu mereka memiliki Ketentuan Layanan yang jauh lebih terbuka. Namun, sebagian besar layanan tidak melakukan geocoding terbalik. Saya tahu Texas A&M memiliki layanan gratis tetapi mereka memiliki TOS yang memperingatkan bahwa Anda tidak dapat mengumpulkan data tentang orang lain, dan mereka memiliki masalah waktu uptime dan akurasi sebelumnya.
— Joseph Hansen

Jawaban:

201

Anda akan melakukan hal seperti itu menggunakan Google API.

Harap perhatikan bahwa Anda harus menyertakan pustaka google maps agar ini berfungsi. Google geocoder mengembalikan banyak komponen alamat sehingga Anda harus menebak siapa yang akan memiliki kota tersebut.

"administrative_area_level_1" biasanya apa yang Anda cari, tetapi terkadang lokalitas adalah kota yang Anda cari.

Bagaimanapun - detail lebih lanjut tentang tipe respons google dapat ditemukan di sini dan di sini .

Di bawah ini adalah kode yang harus melakukan trik:

<!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>
— Michal
sumber
3
Tidak berlaku untuk admin area level 1, terkadang nama kota tidak ada. - {"long_name" => "San Francisco", "types" => ["administrative_area_level_2", "political"], "short_name" => "San Francisco"}, {"long_name" => "California", "jenis "=> [" administrative_area_level_1 "," political "]," short_name "=>" CA "}, {" long_name "=>" Amerika Serikat "," types "=> [" country "," political "]," short_name "=>" US "}
— Ming Tsai
5
Untuk V3, string {'latlng': latlng} harus diubah menjadi 'location', seperti pada ... geocode ({'location': latlng}). Contoh ini membuat saya hampir sampai, tetapi string 'latlng' tampaknya tidak lagi valid di apis yang lebih baru. Lihat: developers.google.com/maps/documentation/javascript/… untuk lebih spesifik.
— binarygiant
@Michal bagaimana kita bisa menemukan hanya nama negara atau kode negara daripada alamat lengkap?
— ajay
1
@ajay dalam uji pernyataan if untuk "negara" dan variabel kota sekarang akan mengembalikan data negara. Jika menamainya dengan nama negara = hasil [0] .address_components [i] Anda dapat mengakses data berdasarkan country.long_name dan country.short_name
— Michal
Apakah ada cara untuk mempersempit ini ke kota-kota di dalam provinsi atau hanya untuk memeriksa apakah lokasi berasal dari provinsi tertentu, dan jika pengguna diarahkan ke halaman web tertentu?
— SorryEh
52

Pendekatan lain untuk ini adalah dengan menggunakan layanan saya, http://ipinfo.io , yang mengembalikan nama kota, wilayah, dan negara berdasarkan alamat IP pengguna saat ini. Berikut ini contoh sederhana:

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

Berikut adalah contoh JSFiddle yang lebih terperinci yang juga mencetak informasi respons lengkap, sehingga Anda dapat melihat semua detail yang tersedia: http://jsfiddle.net/zK5FN/2/

— Ben Dowling
sumber
23
Tapi tidak seakurat itu.
— Salman von Abbas
4
Tidak dapat mendeteksi kota dan bahkan trgion dari IP penyedia Rusia yang besar: (
— Jehy
2
Lol ... ini memberi ip jaringan internal saya (192.168 ...)
— major-mann
Bisakah saya melakukannya dari browser perangkat (genggam)?
— Arti
Tampaknya tidak dapat diandalkan. Saya menggunakan laptop dan ponsel sekarang. Kota-kota yang ditampilkan di kedua perangkat melalui ipinfo.io berjarak 530 kilometer!
— Ashish Goyal
52 

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

Menggunakan geolokasi html5 membutuhkan izin pengguna. Jika Anda tidak menginginkan ini, cari pelacak eksternal seperti https://geolocation-db.com IPv6 didukung. Tidak ada batasan dan permintaan tidak terbatas diizinkan.

Contoh

Untuk contoh javascript murni, tanpa menggunakan jQuery, lihat jawaban ini .

— Kurt Van den Branden
sumber
17

Anda bisa mendapatkan nama kota, negara, nama jalan, dan geodata lainnya menggunakan 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>

dan untuk menampilkan data ini pada halaman menggunakan 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>
— Mikhail
sumber
15

Berikut adalah versi kerja yang diperbarui untuk saya yang akan mendapatkan Kota / Kota, Sepertinya beberapa bidang dimodifikasi dalam respons json. Merujuk jawaban sebelumnya untuk pertanyaan ini. (Terima kasih kepada Michal & satu referensi lagi: Tautan 

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);
    }
  });
}
— Pradeep
sumber
10

geolocator.js dapat melakukannya. (Saya penulisnya).

Mendapatkan Nama Kota (Alamat Terbatas)

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

Mendapatkan Informasi Alamat Lengkap

Contoh di bawah ini akan terlebih dahulu mencoba API Geolokasi HTML5 untuk mendapatkan koordinat yang tepat. Jika gagal atau ditolak, itu akan mundur ke Geo-IP look-up. Setelah mendapat koordinat, itu akan membalikkan geocode koordinat ke alamat.

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

Ini menggunakan Google API secara internal (untuk pencarian alamat). Jadi sebelum panggilan ini, Anda harus mengonfigurasi geolocator dengan kunci Google API Anda.

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

Geolocator mendukung geo-location (via HTML5 atau pencarian IP), geocoding, pencarian alamat (reverse geocoding), jarak & durasi, informasi zona waktu dan banyak lagi fitur ...

— Onur Yıldırım
sumber
6

Setelah beberapa pencarian dan penyatuan beberapa solusi berbeda bersama dengan barang-barang saya sendiri, saya datang dengan fungsi ini:

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;
}
— Jafo
sumber
3

Anda dapat menggunakan https://ip-api.io/ untuk mendapatkan Nama kota. Ini mendukung IPv6.

Sebagai bonus, ini memungkinkan untuk memeriksa apakah alamat ip adalah node, proxy publik, atau spammer.

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

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

Output 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
    }
}
— Vindhyachal Kumar
sumber
2

Seperti @PirateApp disebutkan dalam komentarnya, itu secara eksplisit bertentangan dengan Google Maps API Licensing untuk menggunakan Maps API seperti yang Anda inginkan.

Anda memiliki sejumlah alternatif, termasuk mengunduh basis data Geoip dan menanyakannya secara lokal atau menggunakan layanan API pihak ketiga, seperti ipdata.co layanan saya .

ipdata memberi Anda geolokasi, organisasi, mata uang, zona waktu, kode panggilan, bendera, dan data status Tor Exit Node dari alamat IPv4 atau IPv6.

Dan dapat diukur dengan 10 titik akhir global yang masing-masing mampu menangani> 10.000 permintaan per detik!

Jawaban ini menggunakan Kunci API 'uji' yang sangat terbatas dan hanya dimaksudkan untuk menguji beberapa panggilan. Daftar untuk Kunci API Gratis Anda sendiri dan dapatkan hingga 1500 permintaan setiap hari untuk pengembangan.

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

Biola; https://jsfiddle.net/ipdata/6wtf0q4g/922/

— Jonathan
sumber
1

Ini adalah satu lagi jalannya .. Menambahkan lebih banyak ke jawaban yang diterima mungkin lebih komprehensif .. tentu saja beralih-tas akan membuatnya terlihat elegan.

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;
}
— pengguna3124360
sumber
0

Inilah fungsi mudah yang bisa Anda gunakan untuk mendapatkannya. Saya menggunakan aksioma untuk membuat permintaan API, tetapi Anda dapat menggunakan hal lain.

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;
  }
}
— Komik Kingsley Kbc
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.