IP 주소를 사용하여 경도/위도 좌표 찾기

ipLookUp API: 내 IP 주소 찾기
이 부분은 이전 실습 2 활동에서 완료되었습니다. 기본적으로 ipLookUp API를 사용하여 현재 위치의 IP를 가져왔습니다. 내 소스 코드는 마지막에 게시할 예정이지만 이 부분은 UserIP.js 파일에서 찾을 수 있습니다.

ip-api API: 내 좌표 찾기
이 부분에서는 GeoIP API를 사용하여 내 좌표를 찾기로 가정했지만 나와 협력하지 않았습니다. 502 오류가 계속 발생했습니다.

솔루션을 찾지 못한 후 다른 API를 사용하기로 결정하고 우연히 발견했습니다 ip-api . GEOIP와 유사하게 응답에는 위치 데이터가 포함되었습니다. 이 API가 자동으로 내 IP 주소를 찾아 내 좌표를 찾는 데 사용하는 것이 깔끔했습니다.

다음은 json 형식으로 반환된 정보입니다.

{"status":"success","country":"United States","countryCode":"US","region":"PA","regionName":"Pennsylvania","city":"Williamsport","zip":"17701","lat":41.2382,"lon":-76.9978,"timezone":"America/New_York","isp":"Comcast Cable Communications, LLC","org":"Comcast IP Services, L.L.C.","as":"AS7922 Comcast Cable Communications, LLC","query":"73.230.71.189"}


그러나 이 과제를 완전히 이해하려면 두 번째 연구실에서 수행한 내용을 통합해야 했습니다. 운 좋게도 ip-api에는 개발자가 IP 주소를 수동으로 입력할 수 있는 옵션이 있었습니다.
Image description

getGEOIPData() 함수에서 UserIP(IPClass로 명명)의 인스턴스가 생성되었습니다. 다음으로 IPClass의 updateUser() 함수를 사용하여 내 IP 주소를 반환할 수 있습니다. 가져오기에서 locationEndpoint url("http://ip-api.com/json/" )과 내 IP 주소가 결합됩니다. 그러면 ip-api가 이 정보를 사용하여 내 위치 데이터에 응답합니다. 이 정보를 Google 지도 URL과 위키피디아에 연결할 수 있었습니다. - 쿼리 요소.




결과
이것이 모든 것이 작동했을 때의 내 웹사이트 모습입니다!



연결
  • My GitHub Source Code
  • ip-api API
  • wikipedia-query Element
  • 좋은 웹페이지 즐겨찾기