💡깨달음💡/라이브러리+플러그인+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");
});