카카오맵 세로길이 고정 방법 문의드립니다.
본문
아래는 비타주리님의 카카오맵 자바스크립트 소스인데요.
피씨에서는 적당한 크기로 나오는데 모바일에서 세로길이가 너무 작아서요.
피씨나 모바일 모두 세로길이를 px로 고정할수 있은 방법이 있을까요?
제가 필요해서요! 그누초보라 아무리 해봐도 안되서 문의드려봅니다.
<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:100%"><script>kakaoMap("1669739269026", "2csge", 50);</script></div>
답변 2
잘은 모르겠으나...
style="width:100%"
위에껄 아래꺼로 px갑은 원하는데로 조정...
style="width:100%;height:400px;max-height:500px;"
답변감사합니다^^ 저도 이렇게 해보았었는데 안되더군요;;
------------------------------------------------------------------------
헛!! 프리피아님 감사합니다. 두번째 코드로 하니 잘되네요^^
제가 원하던 거네요!
@스펀지둘
잘되는데요??....
지도 자체는 height에 맞게 나오고, 영역까지 height에 맞춰지는걸 원하시는건가요?
<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%;height:100px;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:100%;height:100px;"><script>kakaoMap("1669739269026", "2csge", 50);</script></div>
또는
<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%;height:400px;box-sizing:border-box'></div>");
new daum.roughmap.Lander({
"timestamp" : map[0], "key" : map[1],
"mapWidth" : "100%",
"mapHeight" : "400"
}).render();
}
</script>
<div style="width:100%;height:400px;"><script>kakaoMap("1669739269026", "2csge", 50);</script></div>
"timestamp" : map[0], "key" : map[1], "mapWidth" : "100%",
"mapHeight" : document.querySelector("#daumRoughmapContainer" + map[0]).offsetWidth * map[2]
위 구간에서
"mapWidth" : "100%", => "mapWidth" : "100px",
"mapHeight" : document.querySelector("#daumRoughmapContainer" + map[0]).offsetWidth * map[2] => "mapHeight" : "100px"
이렇게 넣었을 때 바뀌지 않을까요?
이렇게하니 피씨와 모바일 세로가 300픽셀로 고정되네요.
"mapHeight" : "100px" => 이부분 수치를 높여도 반영이 안되네요.
세로가 400픽셀 정도만 되면 피씨와 모바일 모두 딱 좋은 사이즈가 될듯한데요.
간단할거 같은데 이것저것 해봐도 쉽지가 않네요 ㅠㅠ
해당 코드를 빈 페이지에서 구현하여 사이즈가 늘어나는지 확인해보시고
거기서 늘어난다면 원 구간 맵을 감싸는 상단구간의 높이값에 영향을 받는게 아닌가 의심되네요