야후 사용자 인터페이스 블로그 (YUIBlog)

지오 : YUI 3 갤러리

2011년 5월 6일 오후 4시 46분에서 니콜라스 C. Zakas으로 |에서 개발 , YUI 3 갤러리 | 덧글 없음

위치 정보가 브라우저에 표시보다 흥미로운 HTML5 관련 기술 중 하나이며, 지오 갤러리 모듈은 위치 정보에 액세스할 수 있습니다. W3C 위치 정보 API는 자바 스크립트에서 사용자의 위치를 액세스할 수있는 간단한 인터페이스를 제공합니다. 다음 코드는 지원 브라우저에서 사용자의 현재 위치를 액세스 :

navigator.geolocation.getCurrentPosition(function(result) { //success handler }, function (result){ //failure handler }) 

이 코드가 실행되면, 브라우저는 현재의 위치를​​ 나타내기 위해 사용자의 권한을 묻는 메시지를 팝업. Firefox에서 표시되는 대화 상자는 다음과 같이 보입니다 :

사용자가 권한을 거부하거나 현재 위치를 가져오기를 시도하는 동안 오류가 발생하면 오류 처리기가 호출됩니다. 그렇지 않으면, 성공 핸들러는 현재 위치에 대한 정보라고합니다. 그 정보는 위도 및 경도 좌표 (다른 정보는 구현에 따라,뿐만 아니라 사용할 수 있습니다)의 형태로 제공됩니다.

W3C 위치 정보 API는 그것이 상당히 유비 쿼터스 만들기, 인터넷 익스플로러 9 +, 파이어 폭스 3.5 이상, Safari 5 이상, 크롬과 오페라 10.6뿐만 아니라 안드로이드에 모바일 사파리와 웹킷에서 지원됩니다.

지오 모듈이 가능한 경우 위치 정보 API를 사용하고, YQL을 통해 다시 IP 기반의 조회에 떨어지는 pidgets.geoip 오류가있을 때 사용할 수없는 경우에는 열 또는 테이블. 당신이 특정 IP 주소에 대한 위치 정보를 조회하거나, 당신이 IP 주소를 생략할 수 있기 때문에이 테이블은 매우 유용하고 그것은 요청을 IP 주소에 대한 위치 정보를 반환합니다. 후반은 (다른 솔루션이 해당 IP 주소에 대한 위치 정보를 얻으려면 다음을 IP 주소를 얻는 방법 중 하나를 사용하여) 대신에 두 개의 위치 정보를 얻으려면 하나의 요청을해야 보장합니다.

전형적인 YUI 패션에서 지오 모듈은 위치 정보의 정보에 액세스하기위한 간소화된 인터페이스를 제공합니다. 대신에 두개의 콜백 함수, 실패 성공과 하나 하나를 제공하는 단지 하나에 전달합니다. 그 결과 개체가 success 호출이 성공하면 표시 속성을 :

 YUI({ gallery: 'gallery-2011.04.27-17-14' }).use('gallery-geo', function(Y) { Y.Geo.getCurrentLocation(function(response){ //check to see if it was successful if (response.success){ console.log(response.coords.latitude); console.log(response.coords.longitude); } }); }); 

위치 정보 호출이 성공적으로 완료되면, success 속성이 true이고 response.coords 적어도 두 가지 속성으로 가득합니다 : latitude 와 longitude (네이티브 API를 사용하면, 사용 가능한 모든 속성이 개체에 복사됩니다.) 도있다 source 가 YQL로 검색할 경우이 정보는, 기본 API 또는 "pidgets.geoip"에서 가져온 경우, 어느 "네이티브"는 응답 개체에 속성. 오류가 발생하면 사용자가 위치 정보를 제공하기 위해 거절하는 경우, 또는 그 success false입니다.

위치 정보의 API에 오류가있다면, 지오 모듈 대신 IP - 기반의 조회를 시도합니다. 그러나, 사용자가 정보를 제공 거절하면, IP 기반 조회가 수행되지 않습니다.

기본 API가 더 정확한 IP 위치보다 있으므로 기본 위치 정보 지원없이 브라우저에서 동일한 품질의 결과를 얻을 수 없다는 것을 명심하십시오. 그러나, 지오 모듈은 사용자에게 위치 기반 경험을 제공하는 좋은 첫 번째 단계입니다.

: 대화 찾기 bloglines | 테크노을

공유하고 확장 : del.icio.us와 스크랩 | 디그 그것! | 레딧!