| 이전 주제 보기 :: 다음 주제 보기 |
| 글쓴이 |
메시지 |
petitsea
가입: 2009년 8월 11일
올린 글: 12
|
 올려짐: 수 10월 28, 2009 1:17 pm 주제: 지도 영역의 사이즈 변동 시 문의드립니다. |
 |
|
안녕하세요..
다음 지도 API 를 사용하던 중 문의 사항이 있어서요..
페이지의 왼쪽에는 div 로 text 영역이 있고, 페이지의 오른쪽에는 div 로 지도 영역이 있습니다. 처음 지도 영역의 크기는 스크린 가로와 세로 사이즈를 구하고, text 영역의 가로,세로 사이즈를 제외한 나머지로 지정해 주었습니다.
지도 객체를 생성할 때, option 부분에 autosize:true 이 구문도 추가하였습니다.
var mapObj = new DMap(document.getElementById("map"), {autosize:true, level:8, offsetX:303, offsetY:102});
그런데, 왼쪽에 div 로 된 text 영역의 style.display 속성값을 block과 none 으로 변경할 때, 동적으로 div 로 된 지도영역의 가로 사이즈를 setting 해 주는데요.
// 지도 layer
if (document.getElementById("map")) document.getElementById("map").style.width = width + "px";
지도 영역의 가로 사이즈를 처음 가로 사이즈보다 크게 하면, 화면의 오른쪽 끝부분에 일정영역에 지도가 로딩되지 않고, 흰색으로 나옵니다.
지도 영역의 가로 사이즈를 동적으로 늘렸을 때, 일정영역에 지도가 안나오는 문제를 어떻게 해결할 수 있나요?
답변 부탁드립니다. ^^
[/img] |
|
| 위로 |
|
 |
tadoli
Site Admin
가입: 2008년 9월 4일
올린 글: 371
|
| 올려짐: 금 10월 30, 2009 11:14 am 주제: |
|
|
제가 질문의 의도를 정확히 파악한 건지는 모르겠습니다만...
다음과 같은 걸 원하신 건지요?
| 코드: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>다음 지도API 테스트 페이지 </title>
<script type="text/javascript" src="http://apis.daum.net/maps/maps2.js?apikey=DAUM_MAPS_DEMO_APIKEY"></script>
<script type="text/javascript">
var mapObj;
function toggleLayer(layerId) {
var layer = document.getElementById(layerId);
if("none" == layer.style.display)
{
layer.style.display = "block";
document.getElementById("map").style.width = "600px";
}
else
{
layer.style.display = "none";
document.getElementById("map").style.width = "700px";
}
}
</script>
</head>
<body>
<div id="left" style="float:left;width:100px;height:400px;">text</div>
<div id="map" style="width:600px;height:400px;"></div>
<script type="text/javascript">
var loc = new DLatLng(37.529196714213114, 126.92506196011036);
mapObj = new DMap("map", {autosize:false, level:8, offsetX:303, offsetY:102});
mapObj.setCenter(loc, 2);
</script>
<button onclick="toggleLayer('left');">보이기/숨기기</button>
</body>
</html>
|
|
|
| 위로 |
|
|
petitsea
가입: 2009년 8월 11일
올린 글: 12
|
| 올려짐: 금 10월 30, 2009 3:06 pm 주제: |
|
|
네...답변 올려주셔서 감사합니다.
예제 코드가 제가 원한게 맞긴 한데요..
음...예제 코드상에는 지도 영역 width 의 사이즈가 고정값인데,
저희쪽에서는 지도 영역 width 의 사이즈를 구할 때, 스크린의 가로 사이즈로 구합니다.
즉, 좌측 레이어가 접힐 때는 document.getElementById("map").style.width = '스크린의 가로사이즈' , 좌측 레이어가 펼쳐질 때는 document.getElementById("map").style.width = '스크린의 가로사이즈' - '좌측 레이어 가로 사이즈' 를 합니다.
답변 부탁드립니다. ㅠㅠ |
|
| 위로 |
|
|
tadoli
Site Admin
가입: 2008년 9월 4일
올린 글: 371
|
| 올려짐: 목 11월 05, 2009 11:41 am 주제: |
|
|
개인적인 사정으로 답변이 늦었습니다. 죄송합니다.
우선 말씀하신 부분은 다음과 같이 해결가능합니다. API 자체적으로 더욱 깔끔한 방법이 없을지 지도API 담당자 분과 상의해 보도록 하겠습니다.
감사합니다.
| 코드: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>다음 지도API 테스트 페이지 </title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript" src="http://apis.daum.net/maps/maps2.js?apikey=DAUM_MAPS_DEMO_APIKEY"></script>
<script type="text/javascript">
var mapObj;
function toggleLayer(layerId) {
var layer = document.getElementById(layerId);
if("none" == layer.style.display)
{
layer.style.display = "block";
document.getElementById("map").style.width = parseInt(document.getElementById("map").style.width) - mapObj.main.options.offsetX + "px";
}
else
{
layer.style.display = "none";
document.getElementById("map").style.width = parseInt(document.getElementById("map").style.width) + mapObj.main.options.offsetX + "px";
}
}
</script>
</head>
<body>
<div id="left" style="float:left;height:100%; width:100px;">Text</div>
<div id="map"></div>
<script type="text/javascript">
var loc = new DLatLng(37.529196714213114, 126.92506196011036);
mapObj = new DMap("map", {autosize:true, level:8, offsetX:100, offsetY:22});
mapObj.setCenter(loc, 2);
</script>
<button onclick="toggleLayer('left');">보이기/숨기기</button>
</body>
</html>
|
|
|
| 위로 |
|
|
tadoli
Site Admin
가입: 2008년 9월 4일
올린 글: 371
|
| 올려짐: 목 11월 05, 2009 4:44 pm 주제: |
|
|
다음 지도API 업데이트시에 해당 기능이 가능하도록 expand시에 해당 옵션이 조정되도록 해 놓을 예정입니다.
감사합니다. |
|
| 위로 |
|
|
petitsea
가입: 2009년 8월 11일
올린 글: 12
|
| 올려짐: 목 11월 05, 2009 4:58 pm 주제: |
|
|
답변주셔서 너무 감사드립니다. ^^
알려주신 방법대로 적용해보도록 하겠습니다.
수고하세요... |
|
| 위로 |
|
|
|
