Notice
Recent Posts
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
관리 메뉴

공부기록용

kakao developer - map 적용하기(2) 본문

💡깨달음💡/라이브러리+플러그인+API

kakao developer - map 적용하기(2)

과부하가즈아 2024. 5. 2. 20:17
지도를 보여주고 싶은데 tab과 accodion에 넣어서 선택적으로 지도를 보여주고 싶었다. 근데 첫 지도는 잘 나오는데 보이지 않다가 click로 상태가 바뀌면서 보여지는 지도가 오류가 나서 이런 저런 방법을 찾다가 해답을 내려준 분이다!!

 

https://youtu.be/IZfdXjrqUiA?si=2jR3Tj64IZLj0-nG

https://youtu.be/Gw_r9jXJvbQ?si=IJUfEjQ4rNAtAafd

 

똑같이 따라해본 결과를 정리해보면서 복기!

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- jquery ui css-->
    <link
      rel="stylesheet"
      href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css"
    />
    <style>
      .map,
      #map {
        border: 1px solid #000;
        width: 100%;
        height: 400px;
      }
      .mytabs > div {
        display: none;
      }
      .mytabs > div:first-of-type {
        display: block;
      }
    </style>
    <title>KaKao-map</title>
  </head>
  <body>
    <h1>tab01 - map</h1>
    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">종로구청</a></li>
        <li><a href="#tabs-2">서울시청</a></li>
        <li><a href="#tabs-3">마포구청</a></li>
      </ul>
      <div id="tabs-1" data-lat="37.5737" data-lng="126.979">
        <div id="map1" class="map"></div>
      </div>
      <div id="tabs-2" data-lat="37.5668" data-lng="126.9782">
        <div id="map2" class="map"></div>
      </div>
      <div id="tabs-3" data-lat="37.5511" data-lng="126.8496">
        <div id="map3" class="map"></div>
      </div>
    </div>

    <hr />

    <h1>accodion - map</h1>
    <div id="accordion">
      <h3>Section 1</h3>
      <div
        id="accoMap1"
        class="map"
        data-lat="37.5737"
        data-lng="126.979"
      ></div>
      <h3>Section 2</h3>
      <div
        id="accoMap2"
        class="map"
        data-lat="37.5668"
        data-lng="126.9782"
      ></div>
      <h3>Section 3</h3>
      <div
        id="accoMap3"
        class="map"
        data-lat="37.5511"
        data-lng="126.8496"
      ></div>
    </div>

    <hr />

    <h1>link - map</h1>
    <ul class="maplink">
      <li>
        <a href="#jongro" data-lat="37.5737" data-lng="126.979">종로구청</a>
      </li>
      <li>
        <a href="#seoul" data-lat="37.5668" data-lng="126.9782">서울시청</a>
      </li>
      <li>
        <a href="#gangseo" data-lat="37.5511" data-lng="126.8496">강서구청</a>
      </li>
    </ul>
    <div id="map"></div>

    <hr />

    <h1>tab02 - map</h1>
    <div class="mytabs">
      <ul>
        <li><a href="#mytabs-1">종로구청</a></li>
        <li><a href="#mytabs-2">서울시청</a></li>
        <li><a href="#mytabs-3">마포구청</a></li>
      </ul>
      <div id="mytabs-1" data-lat="37.5737" data-lng="126.979">
        <div id="mymap1" class="map"></div>
      </div>
      <div id="mytabs-2" data-lat="37.5668" data-lng="126.9782">
        <div id="mymap2" class="map"></div>
      </div>
      <div id="mytabs-3" data-lat="37.5511" data-lng="126.8496">
        <div id="mymap3" class="map"></div>
      </div>
    </div>

    <!-- jquery -->
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <!-- jquery ui js-->
    <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
    <!-- kakao -->
    <script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=180ee7c9eb082131d4e414dd1b25cef6"></script>
    <!-- js -->
    <script src="/index.js"></script>
  </body>
</html>

 

html은 별거 없이 jQuery ui를 사용하여 구현하고자 했음

// ############### kakao-map
// tab01 - map
function showTabMap(lat, lng, target) {
  var mapContainer = document.getElementById(target), // 지도를 표시할 div
    mapOption = {
      center: new kakao.maps.LatLng(lat, lng), // 지도의 중심좌표
      level: 3, // 지도의 확대 레벨
    };

  // 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
  var map = new kakao.maps.Map(mapContainer, mapOption);

  //Marker
  // 마커가 표시될 위치
  var markerPosition = new kakao.maps.LatLng(lat, lng);
  // 마커를 생성
  var marker = new kakao.maps.Marker({
    position: markerPosition,
  });
  // 마커가 지도 위에 표시되도록 설정합니다
  marker.setMap(map);
}

// accodion - map
function showAccoMap(lat, lng, target) {
  var mapContainer = document.getElementById(target), // 지도를 표시할 div
    mapOption = {
      center: new kakao.maps.LatLng(lat, lng), // 지도의 중심좌표
      level: 3, // 지도의 확대 레벨
    };

  // 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
  var map = new kakao.maps.Map(mapContainer, mapOption);

  //Marker
  // 마커가 표시될 위치
  var markerPosition = new kakao.maps.LatLng(lat, lng);
  // 마커를 생성
  var marker = new kakao.maps.Marker({
    position: markerPosition,
  });
  // 마커가 지도 위에 표시되도록 설정합니다
  marker.setMap(map);
}

// link - map
function showLinkMap(lat, lng) {
  var mapContainer = document.getElementById("map"), // 지도를 표시할 div
    mapOption = {
      center: new kakao.maps.LatLng(lat, lng), // 지도의 중심좌표
      level: 3, // 지도의 확대 레벨
    };

  // 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
  var map = new kakao.maps.Map(mapContainer, mapOption);

  //Marker
  // 마커가 표시될 위치
  var markerPosition = new kakao.maps.LatLng(lat, lng);
  // 마커를 생성
  var marker = new kakao.maps.Marker({
    position: markerPosition,
  });
  // 마커가 지도 위에 표시되도록 설정합니다
  marker.setMap(map);
}

// tab02 - map
function myTabMap(lat, lng, target) {
  var mapContainer = document.getElementById(target), // 지도를 표시할 div
    mapOption = {
      center: new kakao.maps.LatLng(lat, lng), // 지도의 중심좌표
      level: 3, // 지도의 확대 레벨
    };

  // 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
  var map = new kakao.maps.Map(mapContainer, mapOption);

  //Marker
  // 마커가 표시될 위치
  var markerPosition = new kakao.maps.LatLng(lat, lng);
  // 마커를 생성
  var marker = new kakao.maps.Marker({
    position: markerPosition,
  });
  // 마커가 지도 위에 표시되도록 설정합니다
  marker.setMap(map);
}


$(function () {
  // ############### jquery-ui
  $("#tabs").tabs({
    // 열었을 때 활성화 create
    create: function (event, ui) {
      var lat = ui.panel.attr("data-lat");
      var lng = ui.panel.attr("data-lng");
      var target = ui.panel.find("div").attr("id");
      showTabMap(lat, lng, target);
    },
    // 클릭 활성화 activate
    activate: function (event, ui) {
      var lat = ui.newPanel.attr("data-lat");
      var lng = ui.newPanel.attr("data-lng");
      var target = ui.newPanel.find("div").attr("id");
      showTabMap(lat, lng, target);
    },
  });

  $("#accordion").accordion({
    create: function (event, ui) {
      var lat = ui.panel.attr("data-lat");
      var lng = ui.panel.attr("data-lng");
      var target = ui.panel.attr("id");
      showAccoMap(lat, lng, target);
    },
    // 클릭 활성화 activate
    activate: function (event, ui) {
      var lat = ui.newPanel.attr("data-lat");
      var lng = ui.newPanel.attr("data-lng");
      var target = ui.newPanel.attr("id");
      showAccoMap(lat, lng, target);
    },
  });


  // ############### jquery
  $(".maplink li a").click(function (e) {
    e.preventDefault(); // link 기본 속성 방지
    var lat = $(this).attr("data-lat");
    var lng = $(this).attr("data-lng");
    showLinkMap(lat, lng);
  });
  $(".maplink li a").eq(0).trigger("click");
  // showLinkMap(37.5737, 126.979); // 초기-종로 data-lat="37.5737" data-lng="126.979"

  $(".mytabs li a").click(function () {
    var targetEl = $(this).attr("href");
    $(".mytabs > div").hide();
    $(targetEl).show();
    var lat = $(targetEl).attr("data-lat");
    var lng = $(targetEl).attr("data-lng");
    var target = $(targetEl).find("div").attr("id");
    myTabMap(lat, lng, target);
  });
  $(".mytabs li a").eq(0).trigger("click");
});

 

 

'💡깨달음💡 > 라이브러리+플러그인+API' 카테고리의 다른 글

kakao developer - map 사용하기(1)  (0) 2024.05.02
Swiper(3) pagination, navigation 커스텀하기  (0) 2024.05.02
Swiper(2) 한 페이지에 다중 swiper적용하기  (2) 2024.05.02
Swiper(1) 기본 사용 및 옵션 정리  (0) 2024.05.02
'💡깨달음💡/라이브러리+플러그인+API' Related Articles more
Comments