마커로 길찾기

728x90

1. 마커 이동시켜 도착지로 카카오맵 불러오기

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>카카오맵 마커 이동 및 길찾기</title>
  <style>
    /* 전체 화면을 채우도록 설정 */
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    /* 지도 표시 영역 설정 */
    #map {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <!-- 지도 표시 영역 -->
  <div id="map"></div>

  <!-- 카카오 지도 API 스크립트 추가 (개인 키 사용 필요) -->
  <script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=5dc1bc6ffb574e60204390643bad8557"></script>
  <script>
    // 로컬 스토리지에서 이전에 저장된 지도 중심 좌표를 가져옴
    var savedPosition = JSON.parse(localStorage.getItem('mapCenter'));

    // 지도 컨테이너 설정 및 기본 옵션 지정
    var mapContainer = document.getElementById('map');
    var mapOption = {
      center: savedPosition
        ? new kakao.maps.LatLng(savedPosition.lat, savedPosition.lng)
        : new kakao.maps.LatLng(36.3275, 127.4268), // 기본 위치 (예: 대전)
      level: 5, // 지도 확대 수준
      mapTypeId: kakao.maps.MapTypeId.ROADMAP // 지도 타입 설정
    };

    // 지도 생성
    var map = new kakao.maps.Map(mapContainer, mapOption);

    // 확대/축소 컨트롤 추가
    var zoomControl = new kakao.maps.ZoomControl();
    map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);

    // 마커 데이터 설정
    var markerData = {
      info: "성심당 케익 부띠크!", // 마커에 표시될 장소명
      position: savedPosition
        ? new kakao.maps.LatLng(savedPosition.lat, savedPosition.lng)
        : new kakao.maps.LatLng(36.3275, 127.4268),
      imageUrl: 'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fch0TFq%2FbtsMojyLajz%2FbWu5fv0Ox11EuAlSI9RxA1%2Fimg.png',
      size: new kakao.maps.Size(100, 100), // 마커 크기 설정
      draggable: true // 드래그 가능 여부 설정
    };

    // 마커 이미지 생성
    var markerImage = new kakao.maps.MarkerImage(markerData.imageUrl, markerData.size);

    // 마커 객체 생성
    var marker = new kakao.maps.Marker({
      position: markerData.position,
      image: markerImage,
      map: map,
      draggable: markerData.draggable
    });

    // 마커 위에 표시될 정보창 업데이트 함수
    function updateInfoWindow(position) {
      var content = `<div style="padding:5px;">${markerData.info} <br>
                  <a href="https://map.kakao.com/link/map/${markerData.info},${position.getLat()},${position.getLng()}" target="_blank" style="color:skyblue">큰지도보기</a> 
                  <a href="https://map.kakao.com/link/to/${markerData.info},${position.getLat()},${position.getLng()}" target="_blank" style="color:blue">길찾기</a></div>`;

      infowindow.setContent(content);
      infowindow.open(map, marker);
    }

    // 정보창 객체 생성
    var infowindow = new kakao.maps.InfoWindow();

    // 초기 마커 위치에 대한 정보창 표시
    updateInfoWindow(marker.getPosition());

    // 마커 드래그 종료 시 이벤트 리스너 추가
    kakao.maps.event.addListener(marker, 'dragend', function () {
      var position = marker.getPosition();

      // 변경된 마커 위치를 로컬 스토리지에 저장
      localStorage.setItem('mapCenter', JSON.stringify({ lat: position.getLat(), lng: position.getLng() }));

      // 정보창 내용 업데이트
      updateInfoWindow(position);

      console.log("새 위치 저장됨:", position.getLat(), position.getLng());
    });
  </script>
</body>

</html>

🔥 업데이트된 기능

길찾기 링크 자동 업데이트
- 마커를 이동하면 새로운 위치를 반영하여 InfoWindow 업데이트
- https://map.kakao.com/link/to/장소명,위도,경도 링크가 마커의 최신 위치를 따라감.
로컬 저장 (localStorage)
- 새로고침해도 마지막으로 이동한 위치를 기억하여 복원.
InfoWindow 자동 갱신
- updateInfoWindow(position) 함수로 마커 이동 시 InfoWindow를 자동 업데이트

🎯 기대 효과

마커를 이동한 후에도 최신 위치로 길찾기가 가능!
사용자가 링크를 클릭하면 새 창에서 카카오 길찾기 페이지가 열림!

2. 움직이는 마커 2개. 하나는 출발지, 하나는 도착지

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>카카오맵 출발지-도착지 길찾기</title>
  <style>
    /* 전체 화면을 채우도록 설정 */
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    /* 지도 영역 스타일 지정 */
    #map {
      width: 100%;
      height: 90%;
    }

    /* 컨트롤 버튼 영역 스타일 지정 */
    #controls {
      text-align: center;
      padding: 10px;
    }

    /* 버튼 스타일 지정 */
    button {
      padding: 10px;
      font-size: 16px;
      background-color: #007BFF;
      color: white;
      border: none;
      cursor: pointer;
      border-radius: 5px;
    }
  </style>
</head>

<body>
  <!-- 지도 표시 영역 -->
  <div id="map"></div>

  <!-- 길찾기 버튼 -->
  <div id="controls">
    <button onclick="openDirection()">🚗 길찾기</button>
  </div>

  <!-- 카카오 지도 API 스크립트 추가 (개인 키 사용 필요) -->
  <script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=5dc1bc6ffb574e60204390643bad8557"></script>
  <script>
    // 로컬 스토리지에서 저장된 출발지와 도착지 정보를 가져옴
    var savedStart = JSON.parse(localStorage.getItem('startLocation'));
    var savedEnd = JSON.parse(localStorage.getItem('endLocation'));

    // 지도 컨테이너 설정
    var mapContainer = document.getElementById('map');
    var mapOption = {
      center: savedStart
        ? new kakao.maps.LatLng(savedStart.lat, savedStart.lng)
        : new kakao.maps.LatLng(36.3275, 127.4268), // 기본 위치 (예: 대전)
      level: 5 // 지도 확대 수준
    };

    // 지도 생성
    var map = new kakao.maps.Map(mapContainer, mapOption);

    // 확대/축소 컨트롤 추가
    var zoomControl = new kakao.maps.ZoomControl();
    map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);

    // 마커 정보 배열
    var markers = [
      {
        key: "start",
        info: "출발지",
        position: savedStart
          ? new kakao.maps.LatLng(savedStart.lat, savedStart.lng)
          : new kakao.maps.LatLng(36.3275, 127.4268),
        imageUrl: "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/red_b.png", // 파란색 마커
        storageKey: "startLocation"
      },
      {
        key: "end",
        info: "도착지",
        position: savedEnd
          ? new kakao.maps.LatLng(savedEnd.lat, savedEnd.lng)
          : new kakao.maps.LatLng(36.340309, 127.389999),
        imageUrl: "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/blue_b.png", // 빨간색 마커
        storageKey: "endLocation"
      }
    ];

    // 마커를 지도에 추가하고 이벤트 등록
    markers.forEach(function (data) {
      var markerImage = new kakao.maps.MarkerImage(data.imageUrl, new kakao.maps.Size(50, 50));
      var marker = new kakao.maps.Marker({
        position: data.position,
        image: markerImage,
        map: map,
        draggable: true // 드래그 가능하도록 설정
      });

      // 마커 위에 정보창 추가
      var infowindow = new kakao.maps.InfoWindow({
        content: `<div style="padding:5px;">${data.info}</div>`
      });
      infowindow.open(map, marker);

      // 마커 드래그 후 위치 변경 시 로컬 스토리지에 저장
      kakao.maps.event.addListener(marker, 'dragend', function () {
        var position = marker.getPosition();
        localStorage.setItem(data.storageKey, JSON.stringify({ lat: position.getLat(), lng: position.getLng() }));
        console.log(`${data.info} 위치 저장됨:`, position.getLat(), position.getLng());
      });

      // 마커 객체 저장
      data.marker = marker;
    });

    // 길찾기 버튼 클릭 시 카카오맵 길찾기 URL을 새 창에서 엶
    function openDirection() {
      var start = markers.find(m => m.key === "start").marker.getPosition();
      var end = markers.find(m => m.key === "end").marker.getPosition();

      // 카카오맵 길찾기 링크 생성 및 새 창에서 열기
      var url = `https://map.kakao.com/link/to/도착지,${end.getLat()},${end.getLng()}/from/출발지,${start.getLat()},${start.getLng()}`;
      window.open(url, "_blank");
    }
  </script>
</body>

</html>

🎯 추가된 기능

✅ 출발지(🔵) & 도착지(🔴) 마커 이동 가능
✅ 마커를 움직이면 localStorage에 저장하여 새로고침해도 유지
✅ 🚗 길찾기 버튼 클릭 시 출발지 → 도착지 길찾기 새 창에서 실행
✅ 카카오맵 공식 길찾기 링크(https://map.kakao.com/link/to/.../from/...) 적용

3. 북마크 선택해서 출발지점, 도착지점 설정해서 카카오맵 열기

4. 유저의 현재위치를 출발지점으로 설정, 현재 위치를 도착지점으로 설정 추가

5. db 서브업적 테이블 데이터로 북마크 만들기

6.북마크 위치에 도착하면 알람 띄우기

7. 유저의 현재 위치가 특정 북마크(subAchivment 테이블의 데이터로 지정) 인근 위치에 도달하면 도착알람 띄우고 북마커 정보를 서버(achivmentC 테이블)에 추가하기

저작자표시

'내일배움 과제 > 최종 프로젝트' 카테고리의 다른 글

발키에서 복수 데이터 읽어오기 (0)	2025.02.25
html에서 카카오 지도 api 사용하기 (0)	2025.02.19
웹소켓, 카카오맵 api 사용 계획 (0)	2025.02.19
트러블슈팅 - 업적 dto의 날짜 타입이 적절치 않아 발생한 오류 (0)	2025.02.17
오늘 회의, 멘토링 (0)	2025.02.13

Strobus

마커로 길찾기

🔥 업데이트된 기능

🎯 기대 효과

🎯 추가된 기능

'내일배움 과제 > 최종 프로젝트' 카테고리의 다른 글

티스토리툴바

마커로 길찾기

🔥 업데이트된 기능

🎯 기대 효과

🎯 추가된 기능

'내일배움 과제 > 최종 프로젝트' 카테고리의 다른 글

관련글

티스토리툴바