รับชื่อเมืองโดยใช้ตำแหน่งทางภูมิศาสตร์

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

ฉันต้องการที่จะแสดงชื่อเมืองดูเหมือนว่าวิธีเดียวที่จะได้รับก็คือการใช้ตำแหน่งทางภูมิศาสตร์ย้อนกลับ API ฉันอ่านเอกสารของ Google เพื่อระบุตำแหน่งทางภูมิศาสตร์ย้อนกลับ แต่ฉันไม่ทราบวิธีรับผลลัพธ์บนไซต์ของฉัน

ฉันไม่ทราบวิธีการใช้สิ่งนี้: "http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+long+'&sensor=true"เพื่อแสดงชื่อเมืองในหน้า

ฉันจะบรรลุสิ่งนี้ได้อย่างไร

javascript html geolocation

— lisovaccaro
แหล่งที่มา

4

หากคุณไม่ได้ใช้แผนที่คุณรู้หรือไม่ว่านี่เป็นสิ่งที่ขัดต่อ TOS ของ Google ใช่ไหม ชี้ 10.4 ที่นี่developers.google.com/maps/termsห้ามใช้เนื้อหาโดยไม่มีแผนที่ Google เว้นแต่ว่าเอกสาร API ของ Maps จะอนุญาตให้คุณทำเช่นนั้นได้โดยชัดแจ้งคุณจะไม่ใช้เนื้อหาในการนำ API Maps ไปใช้โดยไม่มี Google แผนที่ที่เกี่ยวข้อง ตัวอย่างเช่นคุณอาจแสดงภาพสตรีทวิวโดยไม่มีแผนที่ Google ที่สอดคล้องกันเนื่องจากเอกสาร API ของ Maps จะอนุญาตการใช้งานนี้โดยชัดแจ้ง

— PirateApp

5

ใช่ @PirateApp มีจุดดี อาจมีบริการที่ดีกว่า ฉันเคยทำงานกับSmartyStreetsมาก่อนและฉันรู้ว่าพวกเขามีข้อกำหนดในการให้บริการที่เปิดกว้างมากขึ้น อย่างไรก็ตามบริการส่วนใหญ่ไม่ได้ทำรหัสภูมิศาสตร์ย้อนกลับ ฉันรู้ว่า Texas A&M มีบริการฟรีแต่พวกเขามีTOSเตือนว่าคุณไม่สามารถรวบรวมข้อมูลเกี่ยวกับผู้อื่นและพวกเขาเคยมีปัญหาเรื่องความพร้อมใช้งานและความแม่นยำมาก่อน

— โจเซฟแฮนเซน

201

คุณจะทำสิ่งนี้โดยใช้ Google API

โปรดทราบว่าคุณจะต้องรวมห้องสมุด google maps เพื่อให้สิ่งนี้ทำงานได้ Google geocoder ส่งคืนส่วนประกอบที่อยู่จำนวนมากดังนั้นคุณต้องเดาการศึกษาว่าจะมีเมืองใด

"administration_area_level_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" => "San Francisco", "types" => ["administration_area_level_2", "political"], "short_name" => "San Francisco"}, {"long_name" => "California", "ประเภท "=> [" administrator_area_level_1 "," political "]," short_name "=>" CA "}, {" long_name "=>" สหรัฐอเมริกา "," ประเภท "=> [" ประเทศ "," ทางการเมือง "]," short_name "=>" US "}

— Ming Tsai

5

สำหรับ V3 สตริง {'latlng': latlng} ควรเปลี่ยนเป็น 'location' ดังเช่นใน ... geocode ({'location': latlng}) ตัวอย่างนี้ทำให้ฉันเกือบจะถึง แต่สตริง 'latlng' ดูเหมือนจะไม่ถูกต้องใน apis ที่ใหม่กว่า โปรดดู: developers.google.com/maps/documentation/javascript/…สำหรับข้อมูลเฉพาะ

— binarygiant

@Michal เราจะค้นหาเฉพาะชื่อประเทศหรือรหัสประเทศแทนที่อยู่แบบเต็มได้อย่างไร

— ajay

1

@ajay ใน if if test สำหรับ "country" และตัวแปร city จะส่งคืนข้อมูลประเทศ หากตั้งชื่อใหม่ country = results [0] .address_components [i] คุณสามารถเข้าถึงข้อมูลตาม country.long_name และ country.short_name

— Michal

มีวิธี จำกัด สิ่งนี้ลงไปยังเมืองภายในจังหวัดหรือเพียงเพื่อตรวจสอบว่าสถานที่นั้นมาจากจังหวัดที่เฉพาะเจาะจงหรือไม่และหากมีการเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าเว็บเฉพาะหรือไม่

— SorryEh

52

อีกวิธีหนึ่งในการใช้บริการของฉันคือhttp://ipinfo.ioซึ่งส่งคืนชื่อเมืองภูมิภาคและประเทศตามที่อยู่ IP ปัจจุบันของผู้ใช้ นี่คือตัวอย่างง่ายๆ:

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

นี่คือตัวอย่างรายละเอียดเพิ่มเติมของ JSFiddle ที่พิมพ์ข้อมูลการตอบกลับแบบเต็มดังนั้นคุณสามารถดูรายละเอียดทั้งหมดที่มีอยู่: http://jsfiddle.net/zK5FN/2/

— เบ็นดาวลิ่ง
แหล่งที่มา

23

ไม่ถูกต้องแม้ว่า

— Salman von Abbas

4

ไม่สามารถตรวจจับเมืองและแม้กระทั่ง trgion จาก IP ของผู้ให้บริการรายใหญ่ของรัสเซีย: (

— Jehy

2

ฮ่า ๆ ... นี่ให้ IP เครือข่ายภายในของฉัน (192.168 ... )

— เมเจอร์แมนน์

ฉันสามารถทำได้จากเบราว์เซอร์อุปกรณ์ (มือถือ) หรือไม่?

— Arti

ดูเหมือนจะไม่น่าเชื่อถือ ฉันกำลังใช้แล็ปท็อปและโทรศัพท์มือถือตอนนี้ เมืองที่แสดงในอุปกรณ์ทั้งสองผ่าน ipinfo.io นั้นอยู่ห่างกัน 530 กิโลเมตร!

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

ขยายตัวอย่างข้อมูล

การใช้ตำแหน่งทางภูมิศาสตร์ html5 ต้องได้รับอนุญาตจากผู้ใช้ ในกรณีที่คุณไม่ต้องการให้ใช้ตัวระบุตำแหน่งภายนอกเช่นhttps://geolocation-db.com IPv6 ไม่มีข้อ จำกัด และคำขอไม่ จำกัด

JSON: https://geolocation-db.com/json
JSONP: https://geolocation-db.com/jsonp

ตัวอย่าง

สำหรับตัวอย่างจาวาสคริปต์บริสุทธิ์โดยไม่ต้องใช้ jQuery ตรวจสอบนี้คำตอบ

— Kurt Van den Branden
แหล่งที่มา

17

คุณสามารถรับชื่อเมืองประเทศชื่อถนนและข้อมูลภูมิศาสตร์อื่น ๆ ได้โดยใช้ API การเข้ารหัสทางภูมิศาสตร์ของ Google Maps

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

นี่คือรุ่นปรับปรุงการทำงานสำหรับฉันซึ่งจะได้รับเมือง / เมืองดูเหมือนว่าบางฟิลด์จะถูกแก้ไขในการตอบสนอง json อ้างถึงคำตอบก่อนหน้าสำหรับคำถามนี้ (ขอบคุณ Michal และอีกหนึ่งการอ้างอิง: ลิงก์

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
แหล่งที่มา

10

geolocator.jsสามารถทำได้ (ฉันเป็นผู้เขียน)

รับชื่อเมือง (ที่อยู่ จำกัด )

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

รับข้อมูลที่อยู่แบบเต็ม

ตัวอย่างด้านล่างจะลองใช้ API การระบุตำแหน่งทางภูมิศาสตร์ HTML5 ก่อนเพื่อรับพิกัดที่แน่นอน หากล้มเหลวหรือถูกปฏิเสธมันจะย้อนกลับไปหา Geo-IP เมื่อได้รับพิกัดมันจะย้อนกลับรหัสภูมิศาสตร์พิกัดเป็นที่อยู่

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

Geolocatorรองรับตำแหน่งทางภูมิศาสตร์ (ผ่านการค้นหา HTML5 หรือ IP), geocoding, การค้นหาที่อยู่ (Reverse Geocoding), ระยะทางและระยะเวลา, ข้อมูลเขตเวลาและคุณสมบัติอื่น ๆ อีกมากมาย ...

— Onur Yıldırım
แหล่งที่มา

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

โบนัสจะอนุญาตให้ตรวจสอบว่าที่อยู่ ip เป็นโหนดโหนพร็อกซีสาธารณะหรือสแปมเมอร์หรือไม่

รหัส 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);
                 });
        });
    });

รหัส 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
    }
}

— Vindhyachal Kumar
แหล่งที่มา

2

ตามที่ @PirateApp พูดถึงในความคิดเห็นของเขามันชัดเจนว่าการอนุญาตให้ใช้ Maps API ของ Google จะใช้ Maps API อย่างที่คุณต้องการ

คุณมีทางเลือกมากมายรวมถึงการดาวน์โหลดฐานข้อมูล Geoip และทำการสืบค้นภายในเครื่องหรือใช้บริการ API ของบุคคลที่สามเช่นบริการของฉันipdata.co ipdata.co

ipdata ให้ข้อมูลตำแหน่งทางภูมิศาสตร์องค์กรสกุลเงินเขตเวลารหัสโทรธงและข้อมูลสถานะโหนด Tor Exit จากที่อยู่ IPv4 หรือ IPv6 ใด ๆ

และสามารถปรับขนาดได้ด้วยจุดปลาย 10 จุดทั่วโลกแต่ละแห่งสามารถจัดการ> 10,000 คำขอต่อวินาที!

คำตอบนี้ใช้คีย์ 'ทดสอบ' API ที่มี จำกัด มากและใช้สำหรับการทดสอบการโทรไม่กี่ครั้งเท่านั้น ลงทะเบียนสำหรับรหัส API ฟรีของคุณเองและรับคำขอได้มากถึง 1,500 คำขอต่อวันเพื่อการพัฒนา

$.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เพื่อขอ API แต่คุณสามารถใช้สิ่งอื่นได้

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 การ์ตูน
แหล่งที่มา