Coğrafi konumu kullanarak şehir adını alın

140

HTML tabanlı coğrafi konum kullanarak kullanıcının enlem ve boylamını almayı başardım. 

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

Şehir adını görüntülemek istiyorum, onu almanın tek yolu bir ters coğrafi konum API kullanmaktır. Google'ın ters konum belirleme ile ilgili dokümanlarını okudum ancak siteme nasıl ulaşacağımı bilmiyorum.

Bunu nasıl kullanacağımı bilmiyorum: "http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+long+'&sensor=true"sayfada şehir adını görüntülemek için.

Bunu nasıl başarabilirim?

javascript  html  geolocation 
— lisovaccaro
kaynak
4
Harita kullanmayacaksanız, bunun Google'ın Hizmet Şartları'na aykırı olduğunu biliyorsunuz değil mi? Burada 10.4 noktasını gelin. Developers.google.com/maps/terms Google haritası olmadan İçeriğin kullanımı yok. Haritalar API'ları Dokümantasyonu açıkça buna izin vermedikçe, İçeriği karşılık gelen bir Google haritası olmadan bir Haritalar API'sı Uygulamasında kullanmazsınız. Örneğin, Haritalar API'ları Dokümantasyonu bu kullanıma açıkça izin verdiğinden, Sokak Görünümü görüntülerini karşılık gelen bir Google haritası olmadan görüntüleyebilirsiniz.
— PirateApp
5
Evet, @PirateApp'ın iyi bir noktası var. Orada daha iyi hizmetler olabilir. Daha önce SmartyStreets ile çalıştım ve çok daha açık Hizmet Şartları olduğunu biliyorum. Ancak çoğu hizmet ters coğrafi kodlama yapmaz. Texas A&M'nin ücretsiz bir servisi olduğunu biliyorum, ancak başkaları hakkında veri toplayamayacağınız TOS uyarısı var ve daha önce çalışma süresi ve doğruluk sorunları yaşadılar.
— Joseph Hansen

Yanıtlar:

201

Google API kullanarak böyle bir şey yaparsınız.

Bunun çalışması için Google Haritalar kitaplığını eklemeniz gerektiğini lütfen unutmayın. Google geocoder, çok sayıda adres bileşeni döndürdüğü için, hangisinin şehre sahip olacağı konusunda eğitimli bir tahmin yapmalısınız.

"Administrative_area_level_1" genellikle aradığınız şeydir, ancak yerellik peşinde olduğunuz şehirdir.

Her neyse - Google yanıt türleri hakkında daha fazla ayrıntıyı burada ve burada bulabilirsiniz .

Hile yapması gereken kod aşağıdadır:

<!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
kaynak
3
Yönetici alanı düzey 1 için doğru değil, bazen şehir adı orada değil. - {"long_name" => "San Francisco", "türleri" => ["administrative_area_level_2", "siyasi"], "kısa_adı" => "San Francisco"}, {"uzun_adı" => "Kaliforniya", "türleri "=> [" administrative_area_level_1 "," siyasi "]," kısa_adı "=>" CA "}, {" uzun_adı "=>" ABD "," türleri "=> [" ülke "," siyasi "]," short_name "=>" ABD "}
— Ming Tsai
5
V3 için {'latlng': latlng} dizesi ... geocode ({'location': latlng}) 'da olduğu gibi' location 'olarak değiştirilmelidir. Bu örnek beni neredeyse oraya getirdi, ancak 'latlng' dizesi artık yeni apislerde geçerli görünmüyor. Ayrıntılar için developers.google.com/maps/documentation/javascript/… adresine bakın .
— binarygiant
@Michal tam adres yerine yalnızca ülke adını veya ülke kodunu nasıl bulabiliriz?
— ajay
1
@ajay "ülke" ve şehir değişkeni için if deyim testinde şimdi ülke verilerini döndürecektir. Country = results [0] .address_components [i] olarak yeniden adlandırırsanız, verilere country.long_name ve country.short_name tarafından erişebilirsiniz.
— Michal
Bunu bir il içindeki şehirlere daraltmanın veya sadece yerin belirli bir ilden olup olmadığını ve kullanıcının belirli bir web sayfasına yönlendirilip yönlendirilmediğini kontrol etmenin bir yolu var mı?
— ÜzgünüzEh
52

Buna başka bir yaklaşım , kullanıcının geçerli IP adresine göre şehir, bölge ve ülke adını döndüren http://ipinfo.io hizmetimi kullanmaktır . İşte basit bir örnek:

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

Aşağıda, tüm yanıt bilgilerini de yazdıran daha ayrıntılı bir JSFiddle örneği verilmiştir, böylece mevcut tüm ayrıntıları görebilirsiniz: http://jsfiddle.net/zK5FN/2/

— Ben Dowling
kaynak
23
Yine de doğru değil.
— Salman von Abbas
4
Büyük bir Rus tedarikçisinin IP'sinden şehir ve hatta trgion tespit edilemedi: (
— Jehy
2
Lol ... bu benim iç ağ ip (192.168 ...) verir
— major-mann
Bir cihaz (el tipi) tarayıcısından yapabilir miyim?
— Arti
Güvenilir görünmüyor. Şu anda bir dizüstü bilgisayar ve cep telefonu kullanıyorum. Her iki cihazda ipinfo.io üzerinden gösterilen şehirler 530 kilometre arayla!
— 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>
Snippet'i genişlet

Html5 coğrafi konumunu kullanmak için kullanıcı izni gerekir. Bunu istemiyorsanız, https://geolocation-db.com IPv6 gibi harici bir konumlayıcıya gidin . Kısıtlamaya ve sınırsız isteklere izin verilmez.

Misal

Saf javascript örneği için, jQuery kullanmadan bu cevaba göz atın.

— Kurt Van den Branden
kaynak
17

Google Haritalar Coğrafi Kodlama API'sını kullanarak şehrin, ülkenin, sokak adının ve diğer coğrafi verilerin adını alabilirsiniz

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

ve bu verileri jQuery kullanarak sayfada görüntülemek için

<!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
kaynak
15

İşte benim için güncellenmiş çalışma sürümü Şehir / Kasaba alacak, Görünüşe göre bazı alanlar json yanıt değiştirilmiş. Bu sorular için önceki yanıtlara başvurmak. (Michal ve bir referans daha teşekkürler: 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);
    }
  });
}
— Pradeep
kaynak
10

geolocator.js bunu yapabilir. (Ben yazarım).

Şehir Adını Alma (Sınırlı Adres)

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

Tam Adres Bilgilerini Alma

Aşağıdaki örnek, kesin koordinatları elde etmek için önce HTML5 Coğrafi Konum API'sını deneyecektir. Başarısız olursa veya reddedilirse, Geo-IP aramasına geri döner. Koordinatları aldığında, koordinatları bir adrese ters-coğrafi olarak kodlar.

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

Bu, Google API'larını dahili olarak kullanır (adres aramak için). Bu nedenle, bu çağrıdan önce coğrafi konum belirleyiciyi Google API anahtarınızla yapılandırmanız gerekir.

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

Geolocator coğrafi konumu (HTML5 veya IP aramaları yoluyla), coğrafi kodlamayı, adres aramalarını (ters coğrafi kodlama), mesafe ve süreleri, saat dilimi bilgilerini ve çok daha fazlasını destekler ...

— Onur Yıldırım
kaynak
6

Bazı şeyleri aradığımda ve kendi malzemelerimle birlikte birkaç farklı çözümü bir araya getirdikten sonra, bu işlevi buldum:

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

Https://ip-api.io/ adresini kullanabilirsiniz.Şehir Adını almak . IPv6'yı destekler.

Bonus olarak ip adresinin bir tor düğüm, genel proxy veya spam göndericisi olup olmadığını kontrol etmenizi sağlar.

Javascript Kodu:

$(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 Kodu

<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 Çıkışı

{
    "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
kaynak
2

@PirateApp'ın yorumunda belirttiği gibi, Google'ın API'sı Lisanslamasına karşı, istediğiniz gibi Haritalar API'sını kullanmak açıkça.

Bir Geoip veritabanını indirmek ve yerel olarak sorgulamak ya da ipdata.co hizmetim gibi bir üçüncü taraf API hizmeti kullanmak da dahil olmak üzere bir dizi alternatifiniz var .

ipdata size herhangi bir IPv4 veya IPv6 adresinden coğrafi konum, organizasyon, para birimi, saat dilimi, arama kodu, bayrak ve Tor Çıkış Düğümü durum verilerini verir.

Ve saniyede 10.000'den fazla isteği işleyebilen 10 global uç nokta ile ölçeklendirilebilir!

Bu yanıt, çok sınırlı olan ve yalnızca birkaç aramayı test etmek için kullanılan bir 'test' API Anahtarı kullanır. Kendi Ücretsiz API Anahtarınıza kaydolun ve geliştirme için günde 1500'e kadar istek alın.

$.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>
Snippet'i genişlet

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

— Jonathan
kaynak
1

İşte başka bir gitmek .. Kabul edilebilir cevap daha kapsamlı eklemek muhtemelen daha kapsamlı .. tabii ki anahtar -case zarif görünmesini sağlayacaktır.

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;
}
— user3124360
kaynak
0

İşte bunu elde etmek için kullanabileceğiniz kolay bir işlev. API isteğinde bulunmak için axios kullandım , ancak başka bir şey kullanabilirsiniz.

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;
  }
}
— Kingsley Kbc Çizgi Roman
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.