카카오맵 쉽게 사용하는 자바스크립트 함수
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년 전 | 4406 | ||
| 2514 | 1년 전 | 902 | ||
| 2513 |
베리소프트
|
1년 전 | 619 | |
| 2512 |
 SiheonLee |
1년 전 | 949 | |
| 2511 |
 RYANRYAN |
1년 전 | 1078 | |
| 2510 | 1년 전 | 1006 | ||
| 2509 | 1년 전 | 1057 | ||
| 2508 | 1년 전 | 1308 | ||
| 2507 | 1년 전 | 686 | ||
| 2506 | 1년 전 | 1253 | ||
| 2505 |
RYANRYAN |
1년 전 | 1208 | |
| 2504 | 1년 전 | 1409 | ||
| 2503 | 1년 전 | 944 | ||
| 2502 | 1년 전 | 1070 | ||
| 2501 | 1년 전 | 1170 | ||
| 2500 |
welcome
|
1년 전 | 1077 | |
| 2499 |
하늘그루터기
|
1년 전 | 870 | |
| 2498 | 1년 전 | 1177 | ||
| 2497 | 1년 전 | 646 | ||
| 2496 | 1년 전 | 964 | ||
| 2495 |
oneit |
1년 전 | 1417 | |
| 2494 | 1년 전 | 945 | ||
| 2493 | 1년 전 | 947 | ||
| 2492 | 1년 전 | 1155 | ||
| 2491 | 1년 전 | 1120 | ||
| 2490 | 1년 전 | 1089 | ||
| 2489 | 1년 전 | 1019 | ||
| 2488 | 1년 전 | 772 | ||
| 2487 |
 매직크레용 |
1년 전 | 1210 | |
| 2486 | 1년 전 | 830 | ||
| 2485 | 1년 전 | 1007 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기