카카오지도+위치 추적만들기! (배민 따라하기)

지난주 일요일

배달의 민족을 시켰는데

배달원의 위치가 실시간으로 나타나는 걸 봤다

너무 신기해서 비슷하게라도 만들어보자 해서 만들게 되었다

 

일단 지도는 카카오지도를 사용하면 될 거다 

라고 생각했고 문제는 위치 정보를 어떻게 얻어오지..?

라고 생각하고 찾아봤다

그랬더니 놀랍게도

html이 자체적으로 가지고있는 기능이 있었다

navigator.geolocation=현재 위치 위도 경도를 알려준다

navigator.watchPosition=현재 위치+움직일 때마다 같이 움직인다

그래서 적용을 해보았다

 

1.개발자 센터 도메인등록

네이버 개발자센터-> 어플 생성 or기존 어플 입장-> 플랫폼-> 사이트 도메인에 입력-> 요약정보에서 자바스크립트 api키 확인

http://localhost:9090

2. 카카오 지도 연동

https://apis.map.kakao.com/web/sample/geolocationMarker/

소스가 올라와있다

조금만 튜닝해주면 된다

 

카카오 너무 감사합니다 

카카오페이/나에게 보내기/로그인/지도까지 

진짜 빛이다..

 

html

 

지도를 만든다

var mapContainer = document.getElementById('map'), // 지도를 표시할 div

mapOption = {

    center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심 좌표

    level: 10 // 지도의 확대 레벨

};

var map = new kakao.maps.Map(mapContainer, mapOption);

html 이용해 위치 정보를 얻는다

if(navigator.geolocation){

    alert('위치정보 확인');

    var na =navigator.geolocation.watchPosition(success,error,options);

    console.log(na);  

}  

마커에게전달한다

function success(position) {

  console.log(position);

            lat = position.coords.latitude, // 위도

            lon = position.coords.longitude; // 경도

       

            var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다

            message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다

       

        // 마커와 인포윈도우를 표시합니다

        displayMarker(locPosition, message);

};

마커가 여러 개 생기지 않게 해 준다

    if(flag){

        marker.setMap(null);

    }

 

테스트 사진은 

주소가 나와서 스킵!

 

웹으로 테스트하면 위치 정확도가

차이가 좀 난다

포트 포워딩 후 핸드폰으로 접속하면

진짜 카카오 택시처럼 정확해진다

 

친구한테 해보라고 보냈는데 

친구도 놀랐다 ㅋㅋㅋ

 

타인의 위치를 받고 싶다면

https://cordingmonster.tistory.com/category/Springboot/WebSocket

'Springboot/WebSocket' 카테고리의 글 목록