GeoIP 요소 + Wikipedia 쿼리 태그 사용
GeoIP 요소는 무엇입니까?
GeoIP 요소를 사용하면 컴퓨터의 IP 주소를 가져와 경도와 위도로 변환할 수 있습니다. 이 요소를 사용하여 웹 페이지는 웹 페이지에 액세스하는 컴퓨터의 IP 주소를 기반으로 지리적 위치를 즉시 반환할 수 있습니다.
다음 링크에서 GeoIP에 대한 자세한 정보를 확인하십시오. GeoIP
GeoIP 요소 + Wikipedia 쿼리 태그로 무엇을 할 수 있습니까?
GeoIP 요소와 함께 반환된 지리적 위치를 사용하여 Wikipedia 쿼리 태그로 해당 위치의 일부를 검색할 수 있습니다. 검색이 완료되면 쿼리 태그에 태그를 제공한 검색어와 연결된 Wikipedia 기사가 표시됩니다.
웹페이지에 wikipedia 쿼리 태그를 추가하려면 다음 코드를 사용하여 JavaScript 파일 상단에서 가져오기만 하면 됩니다.
import '@lrnwebcomponents/wikipedia-query/wikipedia-query.js';
구성 요소here를 확인할 수도 있습니다.
예를 들어 요소에서 반환된 도시와 주에 대해 Wikipedia에 쿼리하려는 경우 코드는 다음과 같습니다.
<wikipedia-query search="${this.city}, ${this.state}"></wikipedia-query>
그런 다음 위치가 "University Park, United States"인 경우 wikipedia-query 태그는 웹 페이지에서 다음을 반환합니다.
GeoIP 요소는 이 데이터를 어떻게 가져옵니까?
GeoIP 요소는 fetch()를 사용하며, 요소 내에서 fetch 명령이 다음과 같이 표시됩니다.
fetch(this.locationEndpoint + userIPData.ip)
가져오기의 첫 번째 부분은 "this.locationEndpoint"를 가져옵니다. 이 부분은 Free Geo IP 에 연결됩니다. 이 웹 사이트로 이동하면 해당 시스템의 IP 주소를 기반으로 다양한 정보를 표시하는 json 파일을 보여주는 json 응답을 받게 됩니다. 다음은 표시되는 내용의 예입니다.
{
"ip": "23.105.173.167",
"country_code": "US",
"country_name": "United States",
"region_code": "DC",
"region_name": "District of Columbia",
"city": "Washington",
"zip_code": "20016",
"time_zone": "America/New_York",
"latitude": 38.9379,
"longitude": -77.0859,
"metro_code": 511
}
가져오기의 두 번째 부분은 userIP JavaScript 파일에서 사용자의 IP 데이터를 가져옵니다. 다음은 사용자의 IP 주소를 얻기 위해 사용하는 코드입니다.
async updateUserIP() {
return fetch(this.ipLookUp)
.then(resp => {
if (resp.ok) {
return resp.json();
}
return false;
})
.then(data => {
this.ip = data.ip;
return data;
})
.then(data => {
this.location = `${data.city}, ${data.country}`;
return data;
});
}
이 두 데이터 포인트를 사용하여 요소는 얻은 사용자의 IP 주소를 변환하고 해당 IP 위치의 사용 가능한 경도와 위도로 변경할 수 있습니다.
수신한 경도와 위도로 무엇을 할 수 있습니까?
fetch() 메서드의 경도와 위도를 사용하여 해당 값을 Google 지도 URL에 연결하고 해당 위치의 Google 지도 결과를 웹페이지에 포함할 수 있습니다. 다음 코드를 사용하여 수행합니다.
https://maps.google.com/maps?q=${this.lat},${this.long}&t=&z=15&ie=UTF8&iwloc=&output=embed
다음은 해당 삽입이 웹사이트에서 어떻게 보이는지에 대한 예입니다.
사용된 프로젝트의 코드를 볼 수 있는 내 github 저장소
ip-project github repo를 보려면 다음 링크에서 볼 수 있습니다. IP Project Repository
Reference
이 문제에 관하여(GeoIP 요소 + Wikipedia 쿼리 태그 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aaronlienhard/using-the-geoip-element-wikipedia-query-tag-13on텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)