기능 테스트 (지도 API)

1. 실시간 위치 정보 받아오기

const lat = position.coords.latitude;
const lng = position.coords.longitude;

위 코드를 이용해 실시간 위치정보를 받아올 수 있음

브라우저에서 위치 정보 허용할 시 가능

하지만 정확한 위치가 안나오고 직선거리로 600m 가량의 차이를 보임

→ 이를 정확하게 표현할 수 있도록 해야할듯

하지만 위도 경도를 직접 입력해주면 제대로 위치를 표시함 coords.latitude와 longitude의 문제인듯

※추가

https://navermaps.github.io/maps.js.ncp/docs/tutorial-6-map-geolocation.example.html 위 현재 위치를 받아오는 예제에서도 약 400m 가량 차이를 보임

브라우저 문제?

function simulateLocationMove() {
              lat += 0.0001; // 위도 이동량
              lng += 0.0001; // 경도 이동량

              const newPosition = new naver.maps.LatLng(lat, lng);

              // 마커와 지도 중심을 업데이트
              marker.setPosition(newPosition);
              map.setCenter(newPosition);
            }

            // 1초마다 위치 이동을 시뮬레이션
setInterval(simulateLocationMove, 1000);

위 코드를 이용해 1초마다 이동을 시켜 실시간 위치에 따른 변화도 잘 작동됨을 알 수 있었음

1. marker 및 polyline 그리기

marker의 경우 map에 click 이벤트를 달아주어 e.coords로 클릭 위치를 가져오고

var newMarker = new naver.maps.Marker({
          map: map,
          position: point,
        });

위 코드를 통해 쉽게 찍을 수 있음.

https://navermaps.github.io/maps.js.ncp/docs/tutorial-polyline-dynamic.example.html 위 예제를 사용하면 쉽게 polyline을 그려볼 수 있음.

1. marker polyline에서 지우기

naver.maps.Event.addListener(map, "click", function (e) {
        var point = e.coord;

        // Polyline 경로에 클릭 위치 추가
        var path = polyline.getPath();
        path.push(point);

        // 새 마커 생성 후 클릭 이벤트 추가
        var newMarker = new naver.maps.Marker({
          map: map,
          position: point,
        });

        // 마커 클릭 시 polyline 경로에서 제거
        naver.maps.Event.addListener(newMarker, "click", function () {
          // Polyline 경로에서 해당 좌표 제거
          var updatedPath = path.getArray().filter(function (p) {
            return !p.equals(newMarker.getPosition());
          });
          polyline.setPath(updatedPath);

          // 마커 삭제
          newMarker.setMap(null);
        });
      });

위 코드를 통해 map을 클릭 시 coord로 클릭 위치를 가져온 뒤 path에 추가

새로 생긴 마커를 클릭 시 path array에서 클릭된 마커 제거 및 새로 polyline을 그린 후 마커 삭제

하지만 삭제하면서 polyline이 다시 그려지는 과정에서 몇몇 오류가 보임

위 gif 참고

조금 더 실험해봐야 할듯

1. 다중 GPS 실시간 공유는 여러 유저를 테스트 해볼 수 없어 못해봤습니다.
2. 마커의 정보창을 ineerHTML과 같이 html template을 작성할 수 있는 것 같아 마커를 클릭 시 제거하기, 수정하기 등과 같은 연산도 가능해 보입니다!!

예를들어 1,2,3,4 마커가 있을 때, 3번의 마커를 제거하지 않고 이동시키고 싶은 경우와 같은 이벤트도 처리가 가능할 것 같습니다만, 위 gif와 같이 polyline이 잘 그려진 다음에 해보면 좋을 것 같습니다.

• 전체 코드

  <div id="map" style="width: 100%; height: 800px"></div>
  
      <script>
        var position = new naver.maps.LatLng(37.3595704, 127.105399);
  
        var map = new naver.maps.Map("map", {
          center: position,
          zoom: 15,
        });
  
        var polyline = new naver.maps.Polyline({
          map: map,
          path: [],
          strokeColor: "#5347AA",
          strokeWeight: 2,
        });
  
        var markers = [];
  
        if (navigator.geolocation) {
          navigator.geolocation.watchPosition(
            function (position) {
              let lat = position.coords.latitude;
              let lng = position.coords.longitude;
              console.log(lat, lng);
  
              let currentPosition = new naver.maps.LatLng(lat, lng);
  
              if (markers.length === 0) {
                const initialMarker = new naver.maps.Marker({
                  position: currentPosition,
                  map: map,
                  title: "현재 위치",
                });
                markers.push(initialMarker);
              } else {
                markers[0].setPosition(currentPosition);
              }
              map.setCenter(currentPosition);
            },
            function (error) {
              console.error(
                "Error Code: " + error.code + ", Message: " + error.message
              );
            },
            {
              enableHighAccuracy: true,
              maximumAge: 30000,
              timeout: 27000,
            }
          );
        } else {
          alert("Geolocation을 지원하지 않는 브라우저입니다.");
        }
  
        naver.maps.Event.addListener(map, "click", function (e) {
          var point = e.coord;
  
          // Polyline 경로에 클릭 위치 추가
          var path = polyline.getPath();
          path.push(point);
  
          // 새 마커 생성 후 클릭 이벤트 추가
          var newMarker = new naver.maps.Marker({
            map: map,
            position: point,
          });
          markers.push(newMarker);
  
          // 마커 클릭 시 polyline 경로에서 제거
          naver.maps.Event.addListener(newMarker, "click", function () {
            // 클릭한 마커의 위치를 찾기 위해 경로에서 제거
            var updatedPath = [];
            path.getArray().forEach(function (p) {
              if (!p.equals(newMarker.getPosition())) {
                updatedPath.push(p);
              }
            });
  
            // Polyline 경로 업데이트
            polyline.setPath(updatedPath);
  
            // 마커 삭제
            newMarker.setMap(null);
  
            // markers 배열에서 마커 제거
            markers = markers.filter((marker) => marker !== newMarker);
          });
        });
      </script>