위치정보 구글맵에 띄우기 navigator / 그 외 history, location 객체

[ 웹브라우저용 객체들 ] 

 

[ history ] 

<a href = "javascript:history.go(-1)"> 뒤로버튼 </a>

<a href = "javascript:history.go(1)"> 앞으로버튼 </a>

 

<a href = "javascript:history.back( )"> 뒤로버튼 </a>
<a href = "javascript:history.forward( )"> 앞으로버튼 </a>


[ location ]   .href 연결  => 링크걸기 

document.getElementById("move").onclick = function(){
location.href = "http://www.google.com";  }

- 버튼 onclick 등의 이벤트로 링크 걸수 있다. 

 

[ 링크걸기 ] 

1. <a href = " " > 

2. <form action = " " > 
<input type="submit"> 세트 

3. function(){ location.href = " " ; } 

 

 

 

[ **navigator ] 
: (1) 웹브라우저 정보 + (2) 사용자 위치정보 

 

(1) 웹브라우저 정보

navigator.appCodeName  => Mozilla (브라우저 계열)
navigator.platform  =>  윈도우 
navigator.userAgent => 코드네임, 플랫폼, 웹브라우저종류, 등등 다 알려줌 (만능)

 

: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

if( navigator.userAgent.indexof("Chrome") >= 0 ){
 Chrome 이면 audio autoplay 안할게요
} else if( navigator.userAgent.indexof("Edg") >= 0){
 Edg 면 이렇게 할게요
}

navigator.userAgent 활용 =>
- 이런식으로 브라우저별로 설정해둘 수 있고 
- 화면크기, 179.19.19 IP 로 기기 정보도 포함하고 있어서 
   그거에 따른 설정 해둘수 있다.

 

(2) 사용자 위치정보

[ navigator.geolocation ] 

: 단말기 물리적 위치 관리하는 객체 

- pc 는 ip 맵핑 주소로 파악 
- 폰은 이동통신사 gps 정보 파악 
( 보안 - 브라우저 - 위치추적허용 옵션 설정 )

 

- 핵심 함수 
navigator.geolocation.watchPosition ( 성공함수, 실패함수 ) ;
navigator.geolocation.clearWatch ( navi1 ); 

(예시)

<input type="button" value="위치추적start" id="navstart">
<input type="button" value="위치추적stop" id="navtop">

<script>

// 찾기 

let navi1;
    document.getElementById("navstart").onclick = function(){
 navi1 = navigator.geolocation.watchPosition( success, fail );
    }

// 함수자리에 바로 넣어도 되지만, 너무 길어지므로 따로 빼서 함수 정의. 

 

// 멈추기
document.getElementById("navstop").onclick = function(){
navigator.geolocation.clearWatch( navi1 );
    }

 

// success 성공함수 정의

function success( myposition ){
let lat = myposition.coords.latitude; //위도
let lon = myposition.coords.longitude; /경도 
document.getElementById("result").innerHTML =
   "위도 : " + lat + ", 경도 : " + lon;
    }

 

[응용]
위치정보로 위도 경도 얻기 가능

=> 구글맵 검색에서 URL 값으로 위도, 경도를 준 검색 URL에 파라미터로 주면
현재 위치값 지도에서 표시. 
 + 새 팝업창(window) 만들어서 표시 

    function success( myposition ){
let lat = myposition.coords.latitude;
let lon = myposition.coords.longitude;

// 위도경도 얻어놓고 

 

window.open( "http://map.google.com?q=" + lat + "," + lon ,

"위치정보","width=800, height=600, resizable=yes");
    }

 

//window open 할 구글맵 URL에 ? 파라미터에 직접 얻어놓은 위도 경도 넣어주면

== 구글맵 검색창에 위도, 경도 검색한 url 과 같은 결과창  

 

 

 

// 실패 함수 fail 정의 
    function fail( error ){
     document.getElementById("result").innerHTML =
     "오류발생 " + error.code + " 메세지 : " + error.message;
    }

- 위치정보객체( 위도(필수) 경도(필수) 고도(옵션) ) 

 

[ 순서 ] 

=> 위치확인시작 버튼을 클릭하면,  watchPositioin 함수 실행

=> 성공할 경우 success 함수 실행 

=> myposition.coords.latitude/longitude; 함수로  위도 경도 얻어냄. 

=> window.open 새창에 url 파라미터 값으로 위도경도값을 직접 줘서 

   현재 위치를 새창에 띄움