[API]
★[KakaoMapStudy] 20240213 [프로그램 소스]
Jelly-fish
2024. 2. 13. 13:59
KakaoMapStudy
체크할 사항
[참고 사항]
※ 지도 위에 지도 타입 컨트롤을 표시하기
MapTest07.html 참고
//-- ① 지도 타입 컨트롤 (지도 or 스카이뷰) 생성
mapTypeControl = new kakao.maps.MapTypeControl();
//-- ② 지도 타입 컨트롤을 지도에 표시! (Check~!!!)
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
지도 타입 컨트롤을 생성했다고 해서 지도 위에 보여지는 것이 아니다!
지도 타입 컨트롤을 생성한 후에는 지도에 컨트롤을 추가해야만 지도 위에 표시된다.
※ 스크립트단에서, 특정 객체의 `class`를 변경하기
`객체명.className = '변경할 클래스명'` 구문을 통해, 선택한 객체의 클래스명을 변경할 수 있다.
변경하는 클래스 각각에 CSS 를 통해 스타일을 적용시켜 놓았다면 클래스명 변경을 통해
객체의 스타일도 함께 변경되도록 처리할 수 있다.
MapTest08.html 참고
var roadmapControl = document.getElementById("btnRoadmap");
roadmapControl.className = 'selected_btn';
========================= ===============
『객체명.className』 『변경할 클래스명』
Ⅰ. 컨트롤이 표시될 위치 설정
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
- `kakao.maps.ControlPosition` 은 컨트롤이 표시될 위치를 정의한다. `TOPRIGHT`는 오른쪽 위를 의미한다.
| TOP | 위 가운데를 의미한다. 컨트롤 추가 시 아래로 쌓인다. |
| TOPLEFT | 왼쪽 위를 의미한다. 컨트롤 추가 시 오른쪽으로 쌓인다. |
| TOPRIGHT | 오른쪽 위를 의미한다. 컨트롤 추가 시 왼쪽으로 쌓인다. |
| LEFT | 왼쪽 위를 의미한다. 컨트롤 추가 시 아래로 쌓인다. |
| RIGHT | 오른쪽 위를 의미한다. 컨트롤 추가 시 아래로 쌓인다. |
| BOTTOMLEFT | 왼쪽 아래를 의미한다. 컨트롤 추가 시 오른쪽으로 쌓인다. |
| BOTTOM | 아래 가운데를 의미한다. 컨트롤 추가 시 위로 쌓인다. |
| BOTTOMRIGHT | 오른쪽 아래를 의미한다. 컨트롤 추가 시 왼쪽으로 쌓인다. |
Ⅱ. Dragg 금지 속성을 어디서 부여했지에 따른 확대 / 축소 기능의 차이
ⓐ 맵 객체를 생성할 때 `draggable: false` 속성을 부여한 경우.
(`new kakao.maps.Map(container, options);`)
function initialize()
{
container = document.getElementById("map");
options =
{
center: new kakao.maps.LatLng(위도, 경도)
, level : 3
, draggable: false //-- check~!!!
};
map = new kakao.maps.Map(container, options);
}- 함수 정의 및 호출 과정과 달리 `draggable: false;` 옵션을 포함하여 지도를 생성할 경우
- 지도 생성 시 드래그를 통한 이동 뿐 아니라 마우스 휠을 이용한 확대 / 축소 기능도 비활성화 된다.
ⓑ 맵 객체의 setter 를 통해 드래그 금지 속성을 부여한 경우.
(`setDraggable(false)`)
function initialize()
{
container = document.getElementById("map");
options =
{
center: new kakao.maps.LatLng(위도, 경도)
, level : 3
};
map = new kakao.maps.Map(container, options);
// check~!!!
map.setDraggable(false);
}- 드래그는 안 되지만, 마우스 휠을 이용한 확대 / 축소 기능은 활성화 된다.
[참고사항]
※ 지도의 확대 / 축소 기능 제한 (Zoom) 기능은 setter 를 이용하도록 한다.
(`setZoomable(boolean)`)
MapTest10.html 참고
.... (맵 컨테이너, 옵션 설정 구문 생략ㅎㅎ)
map = new kakao.maps.Map(container, options);
ⓐ map.setZoomable(true); //-- 마우스 휠 『Zoom-in/Zoom-out』 가능
ⓑ map.setZoomable(false); //-- 마우스 휠 『Zoom-in/Zoom-out』 불가능
Ⅲ. 맵 위에 마우스 클릭을 했을 때와 같은 이벤트 발생시, 기능 동작하기
`kakao.maps.event.addListener(이벤트가 적용될 대상객체, 이벤트, 기능)` 을 통해
맵 위에특정한 이벤트가 발생될 때마다 기능을 처리하도록 구성할 수 있다.
클릭한 지점에 대한 위도, 경도를 얻어오기 - `Maptest11.html` 참고
1. 클릭 등의 이벤트를 리스너(Listener)에 등록한다.
`kakao.maps.event.addListener(이벤트가 적용될 대상객체, 이벤트, 기능)` 구문을 작성하여 리스너에 등록한다.
kakao.maps.event.addListener(map, "click", function(mouseEvent)
{
클릭 이벤트가 발생했을 때, 처리할 내용들을 작성.
});
→ `map` 객체에 클릭 이벤트가 발생했을 때, 클릭과 관련해서 얻어내야 하는 속성을 `mouseEvent` 변수에 담아온다.
2. 클릭한 지점에 대한 정보를 가져온다. (위도, 경도) - `latLng` 속성변수 객체를 가져온다.
kakao.maps.event.addListener(map, "click", function(mouseEvent)
{
var latlng = mouseEvent.latLng;
}
3. 위도, 경도에 대한 getter 를 통해 위도와 경도를 따로 가져온 후,
뷰 페이지에 보여줄 안내 메시지를 문자열로 구성한다.
var message = "클릭한 위치의 위도는 " + latlng.getLat();
message += " 이고, 경도는 " + latlng.getLng() + " 입니다.";
4. 문자열을 뿌려줄 엘리먼트를 가져와서, `innerHTML` 에 안내 메시지를 삽입해 준다.
5. 클릭한 위치에 해당하는 위치 객체 `LatLng`를 생성하여, 해당 위치로 맵의 중심을 이동시킨다.
KakaoMapApp
실행결과 스크린샷
01
MapTest07.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f14679fbdf06ac31ce61d88a87c1e662"></script>
<script type="text/javascript">
function initialize()
{
container = document.getElementById("map");
options =
{
center: new kakao.maps.LatLng(37.5565334,126.9195265), // 풍성빌딩
level: 3, // 지도 확대축소 레벨
};
// 지도를 그릴 대상(div)과 옵션(options)을 넘겨주며 지도 생성
map = new kakao.maps.Map(container, options);
// 지도 타입 컨트롤(지도 or 스카이뷰) 생성
mapTypeControl = new kakao.maps.MapTypeControl();
// ※ 지도 타입 컨트롤을 생성했다고 해서
// 지도에 타입 컨트롤이 보여지는 것은 아니며,
// 지도에 컨트롤을 추가해야 지도 위에 표시된다.
// 지도 타입 컨트롤을 지도에 표시
//map.addControl();
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
// 『kakao.maps.ControlPosition』은 컨트롤이 표시될 위치를 정의하며,
// 『TOPRIGHT』는 오른쪽 위를 의미한다.
// ·TOP : 위 가운데를 의미한다. 컨트롤 추가 시 아래로 쌓인다.
// ·TOPLEFT : 왼쪽 위를 의미한다. 컨트롤 추가 시 오른쪽으로 쌓인다.
// ·TOPRIGHT : 오른쪽 위를 의미한다. 컨트롤 추가 시 왼쪽으로 쌓인다.
// ·LEFT : 왼쪽 위를 의미한다. 컨트롤 추가 시 아래로 쌓인다.
// (주의. LEFT 가 왼쪽 중앙을 의미하는 것이 아니다.)
// ·RIGHT : 오른쪽 위를 의미한다. 컨트롤 추가 시 아래로 쌓인다.
// (주의. RIGHT 가 오른쪽 중앙을 의미하는 것이 아니다.)
// ·BOTTOMLEFT : 왼쪽 아래를 의미한다. 컨트롤 추가 시 오른쪽으로 쌓인다.
// ·BOTTOM : 아래 가운데를 의미한다. 컨트롤 추가 시 위로 쌓인다.
// ·BOTTOMRIGHT : 오른쪽 아래를 의미한다. 컨트롤 추가 시 왼쪽으로 쌓인다.
// 줌 컨트롤(확대 or 축소) 생성
zoomControl = new kakao.maps.ZoomControl();
// 줌 컨트롤 지도에 표시
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
}
</script>
</head>
<body onload="initialize()">
<!-- ○ 발급받은 App Key -->
<!-- appKey=f14679fbdf06ac31ce61d88a87c1e662 -->
<!-- ○ 지도의 중심 좌표 -->
<!-- 37.5566126,126.9196347 -->
<div>
<h1>Kakao Map 기본 컨트롤 구성</h1>
<hr>
</div>
<!-- 지도를 그릴 div 공간 확보(지정) -->
<div id="map" style="width: 100%; height: 350px;"></div>
</body>
</html>
실행결과 스크린샷
0123
MapTest08.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest08.html</title>
<style type="text/css">
html, body {width: 100%; height: 100%; margin: 0; padding: 0}
.map_wrap {position: relative; overflow: hidden; width: 100%; height: 350px;}
.radius_border {border: 1px solid #919191; border-radius: 5px;}
.custom_typecontrol
{
position: absolute; top: 10px; right: 10px;
overflow: hidden; width: 130px; height: 30px;
margin: 0; padding: 0; z-index: 1; font-size: 12px; font-family: 맑은 고딕;
}
.custom_typecontrol span
{
display: block; width: 65px; height: 30px;
float: left; text-align: center; line-height: 30px; cursor: pointer;
}
.custom_typecontrol .btn
{
background: #fff;
background: linear-gradient(#fff, #e6e6e6);
}
.custom_typecontrol .btn:hover
{
background: #f5f5f5;
background: linear-gradient(#f5f5f5);
}
.custom_typecontrol .btn:active
{
background: #e6e6e6;
background: linear-gradient(#e6e6e6,#fff);
}
.custom_typecontrol .selected_btn
{
color: #fff;
background: #425470;
background: linear-gradient(#425470, #5b6d8a);
}
.custom_typecontrol .selected_btn:hover {color: #e3e3e3}
.custom_zoomcontrol
{
position: absolute;
top: 50px; right: 10px;
width: 36px; height: 80px;
overflow: hidden; z-index: 1; background-color: #f5f5f5
}
.custom_zoomcontrol span
{
display: block; width: 36px; height: 40px;
text-align: center; cursor: pointer;
}
.custom_zoomcontrol span img
{
width: 15px; height: 15px;
padding: 12px 0;
border: none;
}
.custom_zoomcontrol span:first-child
{
border-bottom: 1px solid #bfbfbf;
}
</style>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f14679fbdf06ac31ce61d88a87c1e662"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
function initialize()
{
container = document.getElementById("map");
options =
{
center: new kakao.maps.LatLng(37.5565334,126.9195265),
level: 3,
};
map = new kakao.maps.Map(container, options);
}
// 지도 타입 컨트롤의 타입을 바꾸는 함수 정의
//-- 지도 타입 컨트롤의 지도 또는 스카이뷰 클릭 시
// 호출되어 지도 타입을 전환할 수 있도록 구성
function setMapType(maptype)
{
// 확인
//alert(maptype);
var roadmapControl = document.getElementById("btnRoadmap");
var skyviewControl = document.getElementById("btnSkyview");
if (maptype=='roadmap')
{
// 클래스 추가하여 클릭한 버튼 색상 변경하기.
roadmapControl.className = 'selected_btn';
skyviewControl.className = 'btn';
map.setMapTypeId(kakao.maps.MapTypeId.ROADMAP);
// [내 풀잉...]==========================================
//map.setMapTypeId(1);
//map.addOverlayMapTypeId(kakao.maps.MapTypeId.ROADVIEW);
//=======================================================
}
if (maptype=='skyview')
{
// 클래스 추가하여 클릭한 버튼 색상 변경하기.
skyviewControl.className = 'selected_btn';
roadmapControl.className = 'btn';
//map.setMapTypeId(kakao.maps.MapTypeId.SKYVIEW);
map.setMapTypeId(kakao.maps.MapTypeId.HYBRID);
//map.setMapTypeId(3);
}
}
function zoomcontrol(type)
{
//alert("확인");
//alert(type);
var level = map.getLevel();
if (type == '+')
{
level = level - 1;
// map.setLevel(level - 1);
}
if (type == '-')
{
level = level + 1;
}
map.setLevel(level);
}
// 지도 확대, 축소 컨트롤의 확대, 축소 함수
//-- 확대 버튼을 선택하면 호출되어 지도를 확대하는 함수
function zoomIn()
{
map.setLevel(map.getLevel() - 1);
}
//-- 축소 버튼을 선택하면 호출되어 지도를 축소하는 함수
function zoomOut()
{
map.setLevel(map.getLevel() + 1);
}
$(document).ready(function()
{
$("#btnRoadmap").click(function()
{
reset();
$("#btnRoadmap").addClass("selected_btn");
$("#btnSkyview").addClass("btn");
});
$("#btnSkyview").click(function()
{
reset();
$("#btnSkyview").addClass("selected_btn");
$("#btnRoadmap").addClass("btn");
});
});
function reset()
{
$("#btnRoadmap").removeClass("selected_btn");
$("#btnRoadmap").removeClass("btn");
$("#btnSkyview").removeClass("selected_btn");
$("#btnSkyview").removeClass("btn");
}
</script>
</head>
<body onload="initialize()">
<!-- ○ 발급받은 App Key -->
<!-- appKey=f14679fbdf06ac31ce61d88a87c1e662 -->
<!-- ○ 지도의 중심 좌표 -->
<!-- 37.5566126,126.9196347 -->
<div>
<h1>Kakao Map 사용자 컨트롤 구성</h1>
<hr>
</div>
<div class="map_wrap">
<div id="map" style="width: 100%; height: 100%; position: relative; overflow: hidden;"></div>
<!-- % 값으로 width 를 지정하면, 창이 줄어들더라도 그 만큼의 길이를 다 쓸 수 있는데
% 값으로 height 를 지정하면 document 의 높이를... -->
<!-- 큰 div 안에 작은 div 가 존재하기 때문에
큰 div 의 크기를 지정해 주어야만 작은 div의 height을 100%로 주었을 때에도
정상적으로 지도가 그려진다. -->
<!-- 지도 타입 컨트롤 div -->
<div class="custom_typecontrol radius_border">
<span id="btnRoadmap" class="selected_btn" onclick="setMapType('roadmap')">지도</span>
<span id="btnSkyview" class="btn" onclick="setMapType('skyview')">스카이뷰</span>
</div>
<!-- 지도 확대축소 컨트롤 div -->
<div class="custom_zoomcontrol radius_border">
<span>
<!-- <img onclick="zoomIn()" alt="확대" src="http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/ico_plus.png"> -->
<img onclick="zoomcontrol('+')" alt="확대" src="http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/ico_plus.png">
</span>
<span>
<!-- <img onclick="zoomOut()" alt="축소" src="http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/ico_minus.png"> -->
<img onclick="zoomcontrol('-')" alt="축소" src="http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/ico_minus.png">
</span>
</div>
</div><!-- close .map_wrap -->
</body>
</html>
실행결과 스크린샷
01
MapTest09.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest09.html</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f14679fbdf06ac31ce61d88a87c1e662"></script>
<script type="text/javascript">
function initialize()
{
container = document.getElementById("map");
options =
{
center: new kakao.maps.LatLng(37.5565334,126.9195265),
level: 3,
// 옵션 자체에서 드래그가 안 되도록 처리
draggable: false;
//--> 드래그도 안 되고, 휠을 통해서 확대 축소도 되지 않는다.
// 옵션 값을 draggable: false; 로 두게 되면
// 확대 축소 (휠 확대 축소) 기능도 되지 않는다.
//-- 함수 정의 및 호출 과정과 달리
// 『draggable: false』 옵션을 포함하여 지도를 생성할 경우
// 지도 생성 시 이동 뿐 아니라 마우스 휠을 이용한
// 확대/축소 기능도 비활성화 된다.
};
map = new kakao.maps.Map(container, options);
// 첫 요청시, 드래그가 안 되도록 처리
//map.setDraggable(false);
//--> 드래그는 안 되지만, 휠을 통해 확대 축소는 가능하다.
}
// 지도 이동 기능을 막거나 풀고자 하는 경우 사용
function setDraggable(draggable)
{
// 확인
//alert(draggable);
// 마우스 드래그로 지도 이동 가능여부 설정
map.setDraggable(draggable);
}
</script>
</head>
<body onload="initialize()">
<!-- ○ 발급받은 App Key -->
<!-- appKey=f14679fbdf06ac31ce61d88a87c1e662 -->
<!-- ○ 지도의 중심 좌표 -->
<!-- 37.5566126,126.9196347 -->
<div>
<h1>Kakao Map 드래그 제한 및 허용</h1>
<hr>
</div>
<div id="map" style="width: 100%; height: 350px;"></div>
<br><br>
<div>
<p>
<button type="button" onclick="setDraggable(false)">드래그 제한</button>
<button type="button" onclick="setDraggable(true)">드래그 허용</button>
</p>
</div>
</body>
</html>
실행결과 스크린샷
012
MapTest10.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest10.html</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f14679fbdf06ac31ce61d88a87c1e662"></script>
<script type="text/javascript">
function initialize()
{
container = document.getElementById("map");
options =
{
center: new kakao.maps.LatLng(37.5565334,126.9195265),
level: 3,
};
map = new kakao.maps.Map(container, options);
}
// 지도의 확대 및 축소 기능을 막거나 풀고자 하는 경우
function setZoomable(zoomable)
{
// 확인
//alert(zoomable);
map.setZoomable(zoomable);
}
</script>
</head>
<body onload="initialize()">
<!-- ○ 발급받은 App Key -->
<!-- appKey=f14679fbdf06ac31ce61d88a87c1e662 -->
<!-- ○ 지도의 중심 좌표 -->
<!-- 37.5566126,126.9196347 -->
<div>
<h1>Kakao Map 확대 및 축소 제한</h1>
<hr>
</div>
<div id="map" style="width: 100%; height: 350px;"></div>
<div>
<p>
<button type="button" onclick="setZoomable(false)">확대축소 제한</button>
<button type="button" onclick="setZoomable(true)">확대축소 허용</button>
</p>
</div>
</body>
</html>
실행결과 스크린샷
0123
MapTest11.html - 클릭시, 해당 위치로 맵 중심이 바뀌도록 개인적으로 기능 추가.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest11.html</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f14679fbdf06ac31ce61d88a87c1e662"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
function initialize()
{
container = document.getElementById("map");
options =
{
center: new kakao.maps.LatLng(37.5565334,126.9195265),
level: 3,
};
map = new kakao.maps.Map(container, options);
clickAction();
}
function clickAction()
{
// 확인
//alert("함수 호출 확인~!!!");
// 클릭 등의 이벤트를 리스너에 등록
//kakao.maps.event.addListener(대상, 이벤트, 기능);
// 대상 이벤트 기능
kakao.maps.event.addListener(map, "click", function(mouseEvent)
{
// * 클릭과 관련해서 얻어내야 하는 속성 - mouseEvent
// 확인
//alert("함수 호출 확인~!!!");
// 클릭한 지점에 대한 정보 가져오기(위도, 경도)
var latlng = mouseEvent.latLng;
// 함수 (get(), set()) 가 아니라, 속성값의 형태
//alert(latlng);
//--==>> (37.54442117283184, 126.91146621593943)
// 위도와 경도가 동시에 경고창으로 나오는 것을 확인.
var message = "클릭한 위치의 위도는 " + latlng.getLat();
message += " 이고, 경도는 " + latlng.getLng() + " 입니다.";
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = message;
lat = latlng.getLat();
lng = latlng.getLng();
moveLatLng = new kakao.maps.LatLng(lat, lng);
map.setCenter(moveLatLng);
// check~!!!
// 위도 경도 객체 latLng 속성변수 값을 저장한 후에
// 그 값에 대한 위도, 경도를 getter 로 접근해야 제대로 위치를 받아올 수 있다.
//alert("위도 : " + lat + ", 경도 : " + lng);
//$("#result").text("위도 : " + lat + ", 경도 : " + lng);
});
}
</script>
</head>
<body onload="initialize()">
<!-- ○ 발급받은 App Key -->
<!-- appKey=f14679fbdf06ac31ce61d88a87c1e662 -->
<!-- ○ 지도의 중심 좌표 -->
<!-- 37.5566126,126.9196347 -->
<div>
<h1>Kakao Map 클릭 이벤트 등록</h1>
<hr>
</div>
<div id="map" style="width: 100%; height: 350px;"></div>
<p>
지도 클릭으로 좌표 확인
</p>
<div id="result"></div>
</body>
</html>
실행결과 스크린샷
012
MapTest12.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest12.html</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f14679fbdf06ac31ce61d88a87c1e662"></script>
<script type="text/javascript">
function initialize()
{
container = document.getElementById("map");
options =
{
center: new kakao.maps.LatLng(37.5565315, 126.9195436),
level: 3,
};
map = new kakao.maps.Map(container, options);
// 지도에 표시할 마커 구성
//marker = new kakao.maps.Marker();
// Json 형태로, ({}) 여러가지 속성값을 넘긴다.
marker = new kakao.maps.Marker(
{
// 지도 중심 좌표에 마커 생성
position: map.getCenter(),
});
// 지도에 마커를 표시할 수 있도록 처리
// 지도에 옵션을 추가할 때 --> map.
// 마커를 추가할 때 (마커가 주인공) --> marker.
marker.setMap(map);
clickAction();
// 마커를 여러 개 맵에 표시하려면
// 마커 객체를 여러 개 만들어서 각각 따로따로 구성해 주어야 한다.
}
function clickAction()
{
kakao.maps.event.addListener(map, "click", function(mouseEvent)
{
// 클릭한 지점의 위도, 경도에 대한 정보 가져오기
var latlng = mouseEvent.latLng;
// 마커 위치를 클릭한 지점으로 이동 check~!!!
marker.setPosition(latlng);
marker.setDraggable(true);
var message = "클릭한 위치의 위도는 " + latlng.getLat();
message += " 이고, 경도는 " + latlng.getLng() + " 입니다.";
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = message;
});
}
</script>
</head>
<body onload="initialize()">
<!-- ○ 발급받은 App Key -->
<!-- appKey=f14679fbdf06ac31ce61d88a87c1e662 -->
<!-- ○ 지도의 중심 좌표 -->
<!-- 37.5566126,126.9196347 -->
<div>
<h1>Kakao Map 마커 표시</h1>
<hr>
</div>
<div id="map" style="width: 100%; height: 350px;"></div>
<p>
지도 클릭으로 좌표 확인 및 해당 위치 마커 표시
</p>
<div id="result"></div>
</body>
</html>실행결과 스크린샷
012
MapTest13.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest13.html</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f14679fbdf06ac31ce61d88a87c1e662"></script>
<script type="text/javascript">
function initialize()
{
container = document.getElementById("map");
options =
{
center: new kakao.maps.LatLng(37.5565315, 126.9195436),
level: 3,
};
map = new kakao.maps.Map(container, options);
// 마커가 표시될 위치 구성
// (길 건너 스타벅스 → 37.556870033091904, 126.9199792620258)
markerPosition = new kakao.maps.LatLng(37.556870033091904, 126.9199792620258);
// 마커 생성
marker = new kakao.maps.Marker(
{
// 구성한 위치 마커 생성
position: markerPosition,
});
// 생성된 마커가 지도에 표시되도록 설정
marker.setMap(map);
//-- 우리가 위에서 생성한 map(line 19)에 마커를 세팅
// [지도 중심] : 풍성빌딩
// [마커 표시] : 길 건너 스타벅스
}
function removeMarker()
{
// 지도 위의 마커 제거
marker.setMap(null);
}
/*
function createMarker()
{
// 마커가 지도(map)에 표시되도록 설정
marker.setMap(map);
}
*/
// 홍대입구역 8번 출구 롯데시네마에 마커가 표시되도록 설정
function createMarker()
{
// 마커가 표시될 위치 구성
var cinemaPosition = new kakao.maps.LatLng(37.557039933407566, 126.92487393112258);
// 1. 기존 마커 위치 변경
//marker.setPosition(cinemaPosition);
// 2. 마커 새로 생성
marker = new kakao.maps.Marker(
{
position: cinemaPosition,
});
// 마커가 지도에 표시되도록 설정
marker.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<!-- ○ 발급받은 App Key -->
<!-- appKey=f14679fbdf06ac31ce61d88a87c1e662 -->
<!-- ○ 지도의 중심 좌표 -->
<!-- 37.5566126,126.9196347 -->
<div>
<h1>Kakao Map 고정 마커 생성</h1>
<hr>
</div>
<div id="map" style="width: 100%; height: 350px;"></div>
<p>
<button type="button" onclick="removeMarker()">마커 제거</button>
<button type="button" onclick="createMarker()">마커 다시 생성</button>
</p>
<div id="result"></div>
</body>
</html>