2012. 11 Youn-Hee Han LINK@KOREATECH http://link.koreatech.ac.kr HTML5 - GeoLocation 2012. 11 Youn-Hee Han LINK@KOREATECH http://link.koreatech.ac.kr
지오로케이션 객체 지오로케이션이란? 현재 위치를 찾는 기능 데스크톱 웹 브라우저 GPS가 포함된 스마트폰과 태블릿 PC 12/7/2018 지오로케이션 객체 지오로케이션이란? 현재 위치를 찾는 기능 데스크톱 웹 브라우저 사용자의 IP 주소를 사용해 현재 위치 찾음 인터넷 익스플로러를 제외한 다른 브라우저에서 사용 가능 GPS가 포함된 스마트폰과 태블릿 PC GPS를 사용해서 현재 위치를 찾음 LINK@KOREATECH
지오로케이션 객체 navigator 객체 속성으로 존재 geolocation 객체를 사용할 수 있는 브라우저인지 구분 12/7/2018 지오로케이션 객체 navigator 객체 속성으로 존재 geolocation 객체를 사용할 수 있는 브라우저인지 구분 <!DOCTYPE html> <html> <head> <title>GeoLocation</title> <meta name="viewport" content="initial-scale=1.0,user-scalable=no"> <script type="text/javascript"> if(navigator.geolocation) { alert("geolocation을 지원하는 브라우저입니다."); } else { alert("geolocation을 지원하지 않는 브라우저입니다."); } </script> </head> <body> </body> </html> GeoCheck.html LINK@KOREATECH
지오로케이션 객체 geolocation 객체 입수법 12/7/2018 지오로케이션 객체 geolocation 객체 입수법 getCurrentPosition() 메서드 - 현재 위치를 실시간으로 받음 첫 번째 매개 변수 - 위치를 가져오는 것이 성공했을 때 실행할 함수 두 번째 매개 변수 - 위치를 가져오는 것이 실패했을 때 실행할 함수 GPS를 사용하면 위치가 변경될 때 실시간으로 함수를 계속해 실행 <!DOCTYPE html> <html> <head> <title>GeoLocation</title> <meta name="viewport" content="initial-scale=1.0,user-scalable=no"> <script type="text/javascript"> window.onload = function() { if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { alert("위치를 가져오는데 성공"); }, function(error) { alert("위치를 가져오는데 실패"); }); } else { alert("geolocation을 지원하지 않는 브라우저입니다."); } </script> </head> <body> </body> </html> GeoFunction.html LINK@KOREATECH
지오로케이션 객체 매개 변수 position 객체의 coords 속성 출력 (1/2) GeoKey.html 12/7/2018 지오로케이션 객체 매개 변수 position 객체의 coords 속성 출력 (1/2) <!DOCTYPE html> <html> <head> <title>GeoLocation</title> <meta name="viewport" content="initial-scale=1.0,user-scalable=no"> <script type="text/javascript"> window.onload = function() { if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var accuracy = position.coords.accuracy; var ldiv = document.getElementById("location"); ldiv.innerHTML = "위도: " + latitude + ", 경도: " + longitude + ", 정확도: " + accuracy + ""; }, GeoKey.html LINK@KOREATECH
지오로케이션 객체 매개 변수 position 객체의 coords 속성 출력 (2/2) GeoKey.html 12/7/2018 function(error) { var er=document.getElementById("error"); switch(error.code) { case error.PERMISSION_DENIED: er.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: er.innerHTML="Location information is unavailable." case error.TIMEOUT: er.innerHTML="The request to get user location timed out." case error.UNKNOWN_ERROR: er.innerHTML="An unknown error occurred." } }); } else { alert("geolocation을 지원하지 않는 브라우저입니다."); </script> </head> <body> <div id="location"></div> <p id="error"></p> </body> </html> GeoKey.html LINK@KOREATECH
지오로케이션 객체 getLocation() 함수 구성 (1/2) GeoHelloMap.html 12/7/2018 <!DOCTYPE html> <html><head> <title>Hello, World!</title> <meta name="viewport" content="initial-scale=1.0,user-scalable=no"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map { width: 100%; height: 100%;} </style> <script type="text/javascript"> function getLocation(position) { var position = new daum.maps.LatLng(position.coords.latitude, position.coords.longitude); var map = new daum.maps.Map(document.getElementById('map'), { center: position, level: 4, mapTypeId: daum.maps.MapTypeId.HYBRID // ROADMAP, SKYVIEW, HYBRID }); var marker = new daum.maps.Marker({ position: position marker.setMap(map); var infowindow = new daum.maps.InfoWindow({ content: 'My Current Location' infowindow.open(map, marker); } GeoHelloMap.html LINK@KOREATECH
지오로케이션 객체 getLocation() 함수 구성 (2/2) GeoHelloMap.html 12/7/2018 window.onload = function() { if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(getLocation, function(error) { alert("위치를 가져오는데 실패"); }); } else { alert("geolocation을 지원하지 않는 브라우저입니다."); } </script> <script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=키값"></script> </head> <body> <div id="map"></div> <p id="error"></p> </body> </html> GeoHelloMap.html LINK@KOREATECH