지리적 위치를 사용하여 도시 이름 얻기

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 
— 리소 바카로
소스
4
지도를 사용하지 않을 경우 이것이 Google의 TOS에 위배된다는 것을 알고 있습니까? 포인트 10.4 here developers.google.com/maps/terms Google지도 없이는 콘텐츠를 사용하지 않습니다. Maps API 문서에서 명시 적으로 허용하지 않는 한 해당 Google지도가 없으면 Maps API 구현에서 콘텐츠를 사용할 수 없습니다. 예를 들어 Maps API 설명서에서 명시 적으로이 사용을 허용하므로 해당 Google지도없이 스트리트 뷰 이미지를 표시 할 수 있습니다.
— PirateApp 5
5
예, @PirateApp은 좋은 지적이 있습니다. 더 나은 서비스가있을 수 있습니다. SmartyStreets 와 함께 일한 적이 있으며 훨씬 더 개방 된 서비스 약관을 알고 있습니다. 그러나 대부분의 서비스는 역 지오 코딩을 수행하지 않습니다. Texas A & M은 무료 서비스를 제공 하지만 다른 사람들에 대한 데이터를 수집 할 수 없으며 이전에 가동 시간 및 정확성 문제를 겪었다 는 TOS 경고를 받았습니다 .
— Joseph Hansen

답변:

201

Google API를 사용하여 이와 같은 작업을 수행합니다.

이 기능을 사용하려면 Google지도 라이브러리를 포함해야합니다. Google 지오 코더는 많은 주소 구성 요소를 반환하므로 어느 도시에 대한 정보를 교육적으로 추측해야합니다.

"administrative_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"=> "샌프란시스코", "유형"=> [ "관리 _area_level_2", "정치적"], "short_name"=> "샌프란시스코"}, { "long_name"=> "캘리포니아", "유형 "=> ["administrative_area_level_1 ","political "],"short_name "=>"CA "}, {"long_name "=>"United States ","types "=> ["country ","political "]," short_name "=>"US "}
— Ming Tsai
5
V3의 경우 ... geocode ({ 'location': latlng})에서와 같이 { 'latlng': latlng} 문자열을 'location'으로 변경해야합니다. 이 예제는 거의 다 왔지만 'latlng'문자열은 더 이상 최신 API에서 유효하지 않은 것 같습니다. 자세한 내용은 developers.google.com/maps/documentation/javascript/… 를 참조하십시오 .
— 이진
@Michal 전체 주소 대신 국가 이름 또는 국가 코드 만 어떻게 찾을 수 있습니까?
— ajay
1
"국가"에 대한 if 문 테스트에서 @ajay 및 도시 변수는 이제 국가 데이터를 반환합니다. country = results [0] .address_components [i]로 이름을 바꾸면 country.long_name 및 country.short_name
— Michal
이것을 지방 내의 도시로 좁히거나 위치가 특정 지방 출신인지 확인하고 사용자가 특정 웹 페이지로 리디렉션되는지 확인하는 방법이 있습니까?
— 죄송합니다 Eh
52

이에 대한 또 다른 접근 방식 은 사용자의 현재 IP 주소를 기반으로 도시, 지역 및 국가 이름을 반환하는 내 서비스 http://ipinfo.io 를 사용하는 것 입니다. 다음은 간단한 예입니다.

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

다음은 전체 응답 정보를 인쇄하는 더 자세한 JSFiddle 예제입니다. 사용 가능한 모든 세부 정보를 볼 수 있습니다. http://jsfiddle.net/zK5FN/2/

— 벤 다울 링
소스
23
정확하지는 않습니다.
— Salman von Abbas
4
러시아의 대기업 공급자의 IP에서 도시와 심지어 trgion도 감지하지 못했습니다. (
— Jehy
2
Lol ... 이건 내 내부 네트워크 IP (192.168 ...)를 제공합니다
— major-mann
장치 (핸드 헬드) 브라우저에서 할 수 있습니까?
— Arti
신뢰할 수없는 것 같습니다. 나는 지금 랩탑과 휴대 전화를 사용하고 있습니다. ipinfo.io를 통해 두 장치에 표시된 도시는 530km 떨어져 있습니다!
— 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이 지원됩니다. 제한 및 무제한 요청이 허용되지 않습니다.

예

jQuery를 사용하지 않고 순수한 자바 스크립트 예제를 보려면 이 답변을 확인하십시오 .

— 커트 반 덴 브란 덴
소스
17

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>

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

City / Town을 얻을 수있는 업데이트 된 작업 버전입니다 .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);
    }
  });
}
— 프라 딥
소스
10

geolocator.js 가 그렇게 할 수 있습니다. (저는 저자입니다).

도시 이름 얻기 (제한된 주소)

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

전체 주소 정보 얻기

아래 예제는 먼저 정확한 좌표를 얻기 위해 HTML5 Geolocation API를 시도합니다. 실패하거나 거부하면 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 조회를 통해), 지오 코딩, 주소 조회 (역 지오 코딩), 거리 및 지속 시간, 시간대 정보 및 더 많은 기능을 지원합니다 ...

— 오 누르 일림
소스
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;
}
— 자포
소스
3

https://ip-api.io/ 를 사용 하여 도시 이름을 얻을 수 있습니다 . IPv6을 지원합니다.

보너스로 IP 주소가 토르 노드인지, 퍼블릭 프록시인지 또는 스패머인지 확인할 수 있습니다.

자바 스크립트 코드 :

$(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 Maps API Licensing이 의도 한대로 Maps API를 사용하는 것은 명백히 반대합니다.

Geoip 데이터베이스를 다운로드하여 로컬로 쿼리하거나 my service ipdata.co 와 같은 타사 API 서비스를 사용하여 여러 가지 대안을 사용할 수 있습니다 .

ipdata는 모든 IPv4 또는 IPv6 주소에서 지리적 위치, 조직, 통화, 시간대, 호출 코드, 플래그 및 Tor 종료 노드 상태 데이터를 제공합니다.

또한 초당 10,000 개 이상의 요청을 처리 할 수있는 10 개의 글로벌 엔드 포인트로 확장 할 수 있습니다!

이 답변은 '제한된'API 키를 사용하며 매우 제한적이며 몇 번의 호출 테스트에만 사용됩니다. 자신의 무료 API 키에 가입하고 개발을 위해 매일 최대 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

여기에 또 다른 내용이 있습니다. 허용 된 답변에 더 포괄적 인 내용을 추가하면 물론 switch-case는 우아하게 보일 것입니다.

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;
}
— 사용자
소스
0

다음은 쉽게 사용할 수있는 기능입니다. API 요청을하기 위해 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 만화
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.