जियोलोकेशन का उपयोग करके शहर का नाम प्राप्त करें

140

मैं 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;
}

मैं शहर का नाम प्रदर्शित करना चाहता हूं, इसे प्राप्त करने का एकमात्र तरीका रिवर्स जियोलोकेशन एपीआई का उपयोग करना है। मैंने रिवर्स जियोलोकेशन के लिए Google के प्रलेखन को पढ़ा, लेकिन मुझे नहीं पता कि मेरी साइट पर आउटपुट कैसे प्राप्त किया जाए।

मुझे नहीं पता कि इसका उपयोग कैसे किया जाए: "http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+long+'&sensor=true"पृष्ठ पर शहर का नाम प्रदर्शित करने के लिए।

इसे कैसे प्राप्त किया जा सकता है?

javascript  html  geolocation 
— lisovaccaro
स्रोत
4
यदि आप नक्शे का उपयोग नहीं करने जा रहे हैं, तो आप जानते हैं कि यह Google के TOS के खिलाफ है बिंदु 10.4 यहाँ Developers.google.com/maps/terms Google मानचित्र के बिना सामग्री का कोई उपयोग नहीं है। जब तक मैप्स एपीआई डॉक्यूमेंटेशन स्पष्ट रूप से आपको ऐसा करने की अनुमति नहीं देता, तब तक आप मैप्स एपीआई कार्यान्वयन में सामग्री का उपयोग बिना संबंधित Google मैप के नहीं करेंगे। उदाहरण के लिए, आप संबंधित Google नक्शे के बिना स्ट्रीट व्यू इमेजरी प्रदर्शित कर सकते हैं क्योंकि मैप्स एपीआई प्रलेखन स्पष्ट रूप से इस उपयोग की अनुमति देता है।
— PirateApp
5
हां, @PirateApp के पास एक अच्छी बात है। वहाँ बेहतर सेवाएं हो सकती हैं। मैंने पहले SmartyStreets के साथ काम किया है और मुझे पता है कि उनके पास बहुत अधिक खुली सेवा की शर्तें हैं। हालांकि अधिकांश सेवाएं रिवर्स जियोकोडिंग नहीं करती हैं। मुझे पता है कि टेक्सास ए एंड एम की एक मुफ्त सेवा है, लेकिन उनके पास टीओएस चेतावनी है कि आप अन्य लोगों पर डेटा एकत्र नहीं कर सकते हैं, और उनके पास अपटाइम और सटीकता के मुद्दे पहले थे।
— जोसेफ हेन्सन

जवाबों:

201

आप Google API का उपयोग करके ऐसा कुछ करेंगे।

कृपया ध्यान दें कि काम करने के लिए आपको Google मैप्स लाइब्रेरी को शामिल करना होगा। Google जियोकोडर बहुत सारे पता घटकों को लौटाता है इसलिए आपको एक शिक्षित अनुमान लगाना चाहिए कि किसके पास शहर होगा।

"एडमिनिस्ट्रेटिव_रे_लेवेल_1" आमतौर पर वह होता है जिसे आप ढूंढ रहे हैं लेकिन कभी-कभी स्थानीयता वह शहर होता है जिसके बाद आप होते हैं।

किसी भी तरह - Google प्रतिक्रिया प्रकारों पर अधिक विवरण यहां और यहां पाया जा सकता है ।

नीचे कोड है कि चाल करना चाहिए:

<!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>
— मीकल
स्रोत
3
व्यवस्थापक क्षेत्र स्तर 1 के लिए सच नहीं है, कभी-कभी शहर का नाम नहीं होता है। - {"long_name" => "सैन फ्रांसिस्को", "प्रकार" => ["प्रशासनिक_हारा_लेवल_2", "राजनीतिक"], "short_name" => "सैन फ्रांसिस्को"}, {"long_name" = "" कैलिफ़ोर्निया "," प्रकार "=> [" एडमिनिस्ट्रेटिव_अरे_लेवल_1 "," पॉलिटिकल "]," शॉर्ट_नेम "=>" सीए "}, {" लॉन्ग_नाम "=>" यूनाइटेड स्टेट्स "," टाइप्स "=> [" देश "," पॉलिटिकल पॉलिटिकल] "," short_name "=>" US "}
— मिंग त्सै
5
V3 के लिए, {'latlng': latlng} स्ट्रिंग को 'स्थान' में बदलना चाहिए, जैसे कि ... geocode ({'location': latlng})। यह उदाहरण मुझे लगभग वहीं मिला, लेकिन 'लैंग्ल' स्ट्रिंग अब नए एपिस में मान्य नहीं लगता है। देखें: डेवलपर । के लिए .maps / documentation/ javascript/…।
— बाइनरीगिएंट
@ मिचल हम पूरे पते के बजाय केवल देश का नाम या देश कोड कैसे खोज सकते हैं?
— अज
1
@ajay अगर "देश" के लिए स्टेटमेंट टेस्ट और सिटी वैरिएबल अब देश डेटा लौटाएगा। यदि यह देश का नाम फिर से = परिणाम [0] .address_compenders [i] आप देश द्वारा डेटा तक पहुँच सकते हैं। long_name और country.short_name
— Michal
क्या यह एक प्रांत के भीतर शहरों तक सीमित करने का तरीका है या सिर्फ यह जांचने के लिए कि क्या स्थान विशिष्ट प्रांत से है, और यदि उपयोगकर्ता किसी विशिष्ट वेबपेज पर रीडायरेक्ट हो जाता है?
— क्षमा करें।
52

इसका एक अन्य तरीका मेरी सेवा, http://ipinfo.io का उपयोग करना है , जो उपयोगकर्ता के आईपी पते के आधार पर शहर, क्षेत्र और देश का नाम देता है। यहाँ एक सरल उदाहरण दिया गया है:

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

यहाँ एक अधिक विस्तृत JSField उदाहरण दिया गया है जो पूर्ण प्रतिक्रिया सूचना को प्रिंट करता है, इसलिए आप सभी उपलब्ध विवरण देख सकते हैं: http://jsfiddle.net/zK5FN/2/

— बेन डॉवलिंग
स्रोत
23
हालांकि उतना सटीक नहीं है।
— सलमान वॉन अब्बास
4
(: एक बड़ा रूस प्रदाता के आईपी से शहर और यहां तक कि trgion पता लगा सकता है नहीं
— Jehy
2
लोल ... यह मेरे आंतरिक नेटवर्क को आईपी (192.168 ...) देता है
— प्रमुख-मैन
क्या मैं इसे एक डिवाइस (हैंडहेल्ड) ब्राउज़र से कर सकता हूँ?
— आरती
विश्वसनीय नहीं लगता है। मैं अभी एक लैपटॉप और एक मोबाइल फोन का उपयोग कर रहा हूं। Ipinfo.io के माध्यम से दोनों उपकरणों में दिखाए गए शहर 530 किलोमीटर अलग हैं!
— आशीष गोयल
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>
स्निपेट का विस्तार करें

HTML5 जियोलोकेशन का उपयोग करने के लिए उपयोगकर्ता की अनुमति की आवश्यकता होती है। यदि आप ऐसा नहीं चाहते हैं, तो https://geolocation-db.com IPv6 जैसे बाहरी लोकेटर के लिए जाएं । कोई प्रतिबंध और असीमित अनुरोधों की अनुमति नहीं है।

उदाहरण

JQuery का उपयोग किए बिना एक शुद्ध जावास्क्रिप्ट उदाहरण के लिए, इस उत्तर को देखें।

— कर्ट वैन डेन ब्रैंडन
स्रोत
17

आप Google मैप्स जियोकोडिंग एपीआई का उपयोग करके शहर, देश, सड़क का नाम और अन्य जियोडाटा का नाम प्राप्त कर सकते हैं

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

और 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>
— मिखाइल
स्रोत
15

यहां मेरे लिए अपडेटेड वर्जन अपडेट किया गया है, जिसे सिटी / टाउन मिलेगा, ऐसा लगता है कि कुछ फील्ड्स को जौन की प्रतिक्रिया में संशोधित किया गया है। इस सवालों के पिछले जवाब का जिक्र करते हुए। (मिशाल और एक और संदर्भ के लिए धन्यवाद: लिंक 

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);
    }
  });
}
— प्रदीप
स्रोत
10

geolocator.js ऐसा कर सकते हैं। (मैं लेखक हूं)।

शहर का नाम (सीमित पता)

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

पूर्ण पता जानकारी प्राप्त करना

नीचे दिए गए उदाहरणों से सटीक निर्देशांक प्राप्त करने के लिए पहले HTML5 जियोलोकेशन एपीआई की कोशिश की जाएगी। यदि विफल या अस्वीकृत हो जाता है, तो यह जियो-आईपी लुक-अप पर वापस आ जाएगा। एक बार जब यह निर्देशांक प्राप्त कर लेता है, तो यह निर्देशांक को एक पते में उलट देगा।

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

यह Google API का उपयोग आंतरिक रूप से (पते की खोज के लिए) करता है। इसलिए इस कॉल से पहले, आपको अपने Google API कुंजी के साथ जियोलोकेटर को कॉन्फ़िगर करना चाहिए।

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

जियोलोकेटर भू-स्थान (HTML5 या IP लुक्स के माध्यम से), जियोकोडिंग, एड्रेस लुक-अप (रिवर्स जियोकोडिंग), दूरी और अवधि, समय क्षेत्र की जानकारी और बहुत अधिक सुविधाओं का समर्थन करता है ...

— ओनुर येल्ड्रिम्म
स्रोत
6

अपने स्वयं के सामान के साथ कुछ अलग-अलग समाधानों के एक साथ कुछ खोज और पेइचिंग के बाद, मैं इस फ़ंक्शन के साथ आया:

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
स्रोत
3

आप https://ip-api.io/ का उपयोग कर सकते हैंशहर का नाम पाने के लिए आप का । यह IPv6 को सपोर्ट करता है।

एक बोनस के रूप में यह जांचने की अनुमति देता है कि क्या आईपी एड्रेस एक टोर नोड, सार्वजनिक प्रॉक्सी या स्पैमर है।

जावास्क्रिप्ट कोड:

$(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 कोड

<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 आउटपुट

{
    "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
    }
}
— विंध्याचल कुमार
स्रोत
2

जैसा कि @PirateApp ने अपनी टिप्पणी में उल्लेख किया है, यह स्पष्ट रूप से आपके द्वारा इरादा किए जाने पर मैप्स एपीआई का उपयोग करने के लिए Google के मानचित्र एपीआई लाइसेंसिंग के खिलाफ है।

आपके पास कई विकल्प हैं, जिसमें एक जियोनीप डेटाबेस डाउनलोड करना और इसे स्थानीय स्तर पर क्वेरी करना या किसी तृतीय पक्ष एपीआई सेवा का उपयोग करना, जैसे कि मेरी सेवा ipdata.co ।

ipdata आपको किसी भी IPv4 या IPv6 पते से जियोलोकेशन, ऑर्गनाइजेशन, करेंसी, टाइमज़ोन, कॉलिंग कोड, फ्लैग और टोर एग्जिट नोड स्टेटस डेटा देता है।

और 10 वैश्विक एंडपॉइंट्स के साथ स्केलेबल है, प्रत्येक को प्रति सेकंड 10,000 अनुरोधों को संभालने में सक्षम है!

यह उत्तर एक 'परीक्षण' एपीआई कुंजी का उपयोग करता है जो बहुत सीमित है और केवल कुछ कॉल के परीक्षण के लिए है। अपनी खुद की फ्री एपीआई कुंजी के लिए साइन अप करें और विकास के लिए प्रतिदिन 1500 अनुरोध प्राप्त करें।

$.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>
स्निपेट का विस्तार करें

बेला; https://jsfiddle.net/ipdata/6wtf0q4g/922/

— जोनाथन
स्रोत
1

यहाँ एक और इसे जाना है .. स्वीकृत उत्तर में अधिक जोड़ना संभवतः अधिक व्यापक है .. निश्चित रूप से स्विच -केस इसे सुरुचिपूर्ण की तलाश करेगा।

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
स्रोत
0

यहां एक आसान फ़ंक्शन है जिसे आप इसे प्राप्त करने के लिए उपयोग कर सकते हैं। मैंने एपीआई अनुरोध करने के लिए axios का उपयोग किया , लेकिन आप कुछ और भी उपयोग कर सकते हैं।

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;
  }
}
— किंग्सलेब Kbc कॉमिक्स
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.