카카오맵 쉽게 사용하는 자바스크립트 함수
1. 문서 상단에 아래의 자바스크립트 함수를 하나 정의해 줍니다.
[code]
<script src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
<script>
function kakaoMap(...map) {
document.write("<div id='" + "daumRoughmapContainer" + map[0] + "' class='root_daum_roughmap root_daum_roughmap_landing' style='width:100%;box-sizing:border-box'></div>");
new daum.roughmap.Lander({
"timestamp" : map[0], "key" : map[1], "mapWidth" : "100%",
"mapHeight" : document.querySelector("#daumRoughmapContainer" + map[0]).offsetWidth * map[2] / 100 - 32
}).render();
}
</script>
[/code]
2. 아래쪽에는 이 함수에 매개변수를 3개 넣어서 호출해 줍니다.
<script>kakaoMap("1669736880249", "2csg4", 60);</script>
<script>kakaoMap("1669739269026", "2csge", 50);</script>
3. 세번째 매개변수 숫자는 카카오맵의 가로사이즈에 대한 세로 퍼센트입니다. 즉 가로길이가 1000픽셀이고 60을 주었다면 세로길이는 600픽셀이 되겠지요.
첫번째와 두번째의 매개변수는 아래 그림을 참고하여 추출합니다.
카카오지도 페이지로 들어가서... https://map.kakao.com/
4. 가로사이즈를 잡기 위해서는 div 등을 하나 감아주는 것이 좋습니다.
<div style="width:500px;margin:0 auto"><script>kakaoMap("1669736880249", "2csg4", 60);</script></div>
<div style="width:100%"><script>kakaoMap("1669739269026", "2csge", 50);</script></div>
5. 백문이 불여일견. 아래 코드를 http://www.mediaplayer.kr/main/bbs/html_editor.php 에서 한번 실행해 보세요. 냑과 나베르 물산의 지도입니다.
[code]
<script src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
<script>
function kakaoMap(...map) {
document.write("<div id='" + "daumRoughmapContainer" + map[0] + "' class='root_daum_roughmap root_daum_roughmap_landing' style='width:100%;box-sizing:border-box'></div>");
new daum.roughmap.Lander({
"timestamp" : map[0], "key" : map[1], "mapWidth" : "100%",
"mapHeight" : document.querySelector("#daumRoughmapContainer" + map[0]).offsetWidth * map[2] / 100 - 32
}).render();
}
</script>
<div style="width:500px;margin:0 auto"><script>kakaoMap("1669736880249", "2csg4", 60);</script></div>
<div style="width:100%"><script>kakaoMap("1669739269026", "2csge", 50);</script></div>
[/code]
댓글 27개
감사합니다. 들레아빠님
사실 게시판에서 적용이 어려운데다 코드 짜기가 귀찮아서 모바일 가로 세로 변환시 세로 사이즈를 다시 리사이징해 주는 코드를 안 넣었어요.
게시글에 쉽게 적용하는 방법을 구상하고 있습니다. 그런데 코드짜기는 더 성가시겠네요.ㅜㅠ
음.. 그럴 때는 모바일모드와 pc모드를 분기해야죠.
모바일모드와 pc모드를 분기하는 자바스크립트는 본인이 만들기에 따라서 다른데
저는 보통 편하게 스크린 크기를 따져서 스크린의 세로가 가로보다 클 때는 모바일모드, 아니라면 pc모드로 판단하는 로직을 사용합니다. 이에 따라서...
<script>kakaoMap("1669736880249", "2csg4", 60);</script>
를 아래처럼요. 모바일일 때는 120퍼센트로, pc에서는 60퍼센트로 사이즈가 나타나겠죠.
<script>kakaoMap("1669736880249", "2csg4", screen.width < screen.height ? 120 : 60);</script>
픽셀 고정값으로 주는 것은 코드는 무지 쉽지만 요즘 같은 반응형 시대에 제가 쌍수를 들고 반대하는 입장이라 따로 소스를 드리진 않겠습니다. 이해하시길요.
감사합니다.
위 조건이 만족된다면 어차피 자바스크립트로 만드는 거라면 난이도는 유사하지 않을까 싶네요.
본인의 전공이 js 라면 별로 어렵지 않을 것 같습니다.
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4429 | ||
| 2694 | 2개월 전 | 199 | ||
| 2693 | 2개월 전 | 157 | ||
| 2692 | 2개월 전 | 164 | ||
| 2691 | 2개월 전 | 179 | ||
| 2690 | 2개월 전 | 332 | ||
| 2689 | 2개월 전 | 243 | ||
| 2688 |
 SIR개발팀 |
2개월 전 | 445 | |
| 2687 | 2개월 전 | 298 | ||
| 2686 |
선택과집중
|
2개월 전 | 335 | |
| 2685 | 2개월 전 | 298 | ||
| 2684 | 3개월 전 | 357 | ||
| 2683 | 3개월 전 | 488 | ||
| 2682 | 3개월 전 | 282 | ||
| 2681 | 3개월 전 | 307 | ||
| 2680 |
선택과집중
|
3개월 전 | 281 | |
| 2679 | 3개월 전 | 336 | ||
| 2678 |
 Xenon54 |
3개월 전 | 433 | |
| 2677 |
Xenon54 |
3개월 전 | 506 | |
| 2676 | 3개월 전 | 332 | ||
| 2675 | 3개월 전 | 309 | ||
| 2674 |
선택과집중
|
3개월 전 | 484 | |
| 2673 |
 ideaman |
3개월 전 | 325 | |
| 2672 | 3개월 전 | 342 | ||
| 2671 | 3개월 전 | 290 | ||
| 2670 | 3개월 전 | 265 | ||
| 2669 | 3개월 전 | 378 | ||
| 2668 | 3개월 전 | 294 | ||
| 2667 |
선택과집중
|
3개월 전 | 491 | |
| 2666 |
선택과집중
|
3개월 전 | 474 | |
| 2665 |
선택과집중
|
4개월 전 | 412 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기