지도 API를 이용한 실시간 위치정보 전송

지도 API를 이용한 실시간 위치정보 전송

요구 사항

• 웹페이지에 접속하여 실시간으로 변경되는 위치정보를 전송한다.
• 전송된 각각의 위치정보를 마커로 표시하고 선으로 연결한다.

사용도구

• 네이버 지도 API 사용
• 편리한 http 통신을 위해 Axios를 사용
• 위치 변경시 실행되는 메소드 웹 브라우저에서 제공하는 *navigator.geolocation.watchPosition* 사용

https://navermaps.github.io/maps.js.ncp/docs/

네이버 지도 생성

// 네이버 지도를 생성합니다.
var map = new naver.maps.Map("map", {
  center: new naver.maps.LatLng(37.5665, 126.978), // 서울 시청을 기준으로 지도 생성
  zoom: 13,
});

위치가 변경될 때마다 실행될 함수 정의

// Polyline을 저장할 변수
var polyline;

// 위치가 변경될 때마다 실행되는 함수
function updatePosition(position) {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;

  // Dto 형식에 맞춘 서버로 전송할 json 생성
  let loca = {
    lati: lat,
    longi: lng,
  };

  // 새로운 위치를 LatLng 객체로 변환합니다.
  var newLatLng = new naver.maps.LatLng(lat, lng);

  // Polyline이 이미 생성되었는지 확인합니다.
  if (!polyline) {
    // 처음 위치가 업데이트되면 Polyline을 생성합니다.
    polyline = new naver.maps.Polyline({
      map: map,
      path: [newLatLng],
      strokeColor: "#FF0000",
      strokeWeight: 3,
    });
  } else {
    if (updatePoly) {
      // 기존 Polyline에 새로운 위치를 추가합니다.
      var path = polyline.getPath();
      path.push(newLatLng);
      // 새로운 위치에 마커를 추가합니다.
      new naver.maps.Marker({
        map: map,
        position: newLatLng,
      });
      // 현제 좌표로 화면 이동
      map.setCenter(newLatLng);

      BeforeLatLng = newLatLng;
      const res = axios.post("/loca/add", loca);
      console.log(`위도 : ${lat} , 경도 : ${lng}`);
    }
  }
}

navigator.geolocation.watchPosition 함수 실행

// 위치 추적을 시작합니다.
function startTracking() {
  if (navigator.geolocation) {
    // 위치가 변경될 때마다 updatePosition 함수를 호출합니다.
    var watchId = navigator.geolocation.watchPosition(updatePosition);
  } else {
    console.error("이 브라우저에서는 Geolocation이 지원되지 않습니다.");
  }
}

// 페이지 로드 시 위치 추적을 시작합니다.
window.onload = startTracking;

테스트