지도 중심좌표 벗어남에대하여

초보개발자입니다!

DB에서 주소값을 받아서 마커를찍고 주소위치로 가져다 주는 방식인데

display에 none을 주지 않으면 벗어나지 않는데 none값이 들어가있을때

원래 위치에서 오른쪽 밑에쪽으로 화면이 잡힙니다.


<div class="map" id="map-view" style="display:none;"> <!-- style="display:none;" -->
	<div class="map-box">
		<h4> <strong> 위치 </strong> </h4> <hr>
	</div>
	<div class="map-detail">
		<jsp:include page="hotelMap.jsp">
		<jsp:param value="${hotelinfoList.getHotel_address()}" name="addr" />
		</jsp:include>
	</div>
</div>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = {
        center: new daum.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };  

// 지도를 생성합니다    
var map = new daum.maps.Map(mapContainer, mapOption); 

// 주소-좌표 변환 객체를 생성합니다
var geocoder = new daum.maps.services.Geocoder();

<%
String addr = request.getParameter("addr");
// String name = request.getParameter("name");
%>

// 주소로 좌표를 검색합니다  ↓ 여기에 주소 String으로 넣으면 지도에 마커 표시됩니다.!!!!!!!
geocoder.addressSearch('<%=addr%>',function(result, status) {
	

    // 정상적으로 검색이 완료됐으면 
     if (status === daum.maps.services.Status.OK) {

        var coords = new daum.maps.LatLng(result[0].y, result[0].x);

        // 결과값으로 받은 위치를 마커로 표시합니다
        var marker = new daum.maps.Marker({
            map: map,
            position: coords
        });
        
        
        
        
        // 인포윈도우로 장소에 대한 설명을 표시합니다
//          var infowindow = new daum.maps.InfoWindow({
<%--             content: '<div style="width:150px;text-align:center;padding:6px 0;">'<%=name%>'</div>' --%>
//         }); 
        	
//         infowindow.open(map, marker);

       
        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
        map.setCenter(coords);
        
        //map.resize();
        map.relayout();
    } 
});

map.relayout()은 display:none 값을 주었을때 지도가 나오지 않는 문제로 벌써 사용중이고

뒤에 map.relayout();
map.setCenter();
map.setLevel(); 이렇게 적용을 해도 전혀 변화가 없습니다. ㅠㅠ

사용하시는 키나 앱이 확인되지 않는데요
현상을 볼 수 있는 페이지나 화면이 있나요?

캡처

마크는 화면의 좌측상단에 있습니다.

마크 주소는 : 제주 서귀포시 남원읍 태위로 522-12 금호제주콘도미니엄
입니다.

display : none 값을 지우면 정상적으로 위치를 잡아주고있는데…

이기능이 들어가야되는 부분인데 몇일째 해결이 안되고있습니다 ㅠㅠㅠㅠ

display: none 이 언제 사라지나요?

display: none 속성을 사라지게 하는 시점에
relayout을 호출해야 합니다.

display : none 은 div 태그에 스타일로 걸어놓으면 화면에 숨겨진상태로 있다가
버튼(토글방식)을 클릭시 지도가 생성되면서 보여주는 방식입니다.

만약 div style=“display:none;” 값을 주게 되면 지도 위치가 틀어지는 문제가 발생합니다!

버튼을 클릭했을 때, 핸들러에서
스타일을 변경 한 다음에(eg. display:block) map.relayout()을 호출해야 합니다.

function map_v(){
$( ‘#map-view’ ).toggle();
map.relayout();
}

지금 제가 주고있는 펑션입니다… 어 설명을 해주신거같은데 잘이해를 못하는중이라 …ㅠㅠ

(eg. display:block) map.relayout()를 어디다 적용시켜야하는지 잘모르겠습니다… ㅠㅠ

<div id="map" style="width:100%;height:350px;"></div>
<button>toggle</button>
<script>
    var mapContainer = document.getElementById('map'),
        mapOption = { 
            center: new daum.maps.LatLng(33.450701, 126.570667),
            level: 3
        };
    var map = new daum.maps.Map(mapContainer, mapOption); 
    var marker = new daum.maps.Marker({
        position: new daum.maps.LatLng(36.0701, 127.570667),
        map: map
    })
    $('button').click(function() {
        $('#map').toggle();
        map.relayout();
        map.setCenter(new daum.maps.LatLng(36.0701, 127.570667))
    });
</script>

제가 원하는대로 잘 동작하는데요…

심지어 위에 #map 엘리먼트 스타일에 display:none을 넣고 시작해도 마커가 지도 중앙에 잘 나옵니다.

1개의 좋아요

어…음 제가 DB에서 주소를 땡겨와서 그 주소값을 지도로 하는 상황인데 저렇게 값을

넣어버리면 아예 토글자체가 실행하지를 못합니다…

div id="map" style="width:100%;height:350px;" /div


script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=키값&libraries=services"/script

<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = {
        center: new daum.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };  

// 지도를 생성합니다    
var map = new daum.maps.Map(mapContainer, mapOption); 

// 주소-좌표 변환 객체를 생성합니다
var geocoder = new daum.maps.services.Geocoder();

<%
String addr = request.getParameter("addr");
%>

// 주소로 좌표를 검색합니다  ↓ 여기에 주소 String으로 넣으면 지도에 마커 표시됩니다.!!!!!!!
geocoder.addressSearch('<%=addr%>',function(result, status) {
	

    // 정상적으로 검색이 완료됐으면 
     if (status === daum.maps.services.Status.OK) {

        var coords = new daum.maps.LatLng(result[0].y, result[0].x);

        // 결과값으로 받은 위치를 마커로 표시합니다
        var marker = new daum.maps.Marker({
            map: map,
            position: coords
        });
        

       
        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
        map.setCenter(coords);
        
        //map.resize();
        map.relayout();
       
        	
    } 
});    
/script

지금 현상태입니다.

캡처2

보시게 되면

div class=“map” id=“map-view” style=“display:none;” 에서

div class=“map” id=“map-view” 스타일에 디스플레이 논을 지우게 되면 정상적으로 중심좌표가 잡히는 상황이고 none 값을 주게되면 좌표가 벗어나는 문제에있습니다.

어떤 상황인지 모르겠네요…
none을 준다는건 어짜피 지도를 보지 않겠다는 의미이고
그 상태에서는 좌표가 벗어나든 벗어나지 않든 상관 없는 상황 아닌가요?

위 상태에서 display: none을 삭제하는게 바로 지도를 보겠다는 것이고
그 때 보여진 이후 map.relayout(); 을 해 주면 정상적으로 표시되는 것이고요.

위 첨부해 주신 코드에서 토글이 언제 되는지는 확인할 수 없지만…

map.relayout();
map.setCenter(coords);

이 순서로 호출해야 합니다.

이 쓰레드의 흐름을 봤을때 이 후로는 아무리 스샷과 코드 조각을 올리셔도
제가 어떤 상황인지 알 수가 없을 것 같아요.

외부에서 확인할 수 있는 URL을 보내주시거나
코드 전문을 보내주세요.

노출을 원치 않으시면 제 아이디 클릭해서 메세지로 보내주세요.

1개의 좋아요

아 제 설명이 부족했던것같습니다…

예를 들면 만약

제주 금호리조트 관련 해서 지역명이 생기면 거기를 클릭할시(토글방식)

밑에 디스플레이 논방식으로 있던 지도가 나와서 보여지는 방식으로 설정을 해놓은 상태입니다.

1
/////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////
2

map.relayout();

이건 잘 된건데요.

map.setCenter(coords);

이게 안 된 상황이고

지도 중심을 마커의 위치로 다시금 지정해 주셔야 합니다.

1개의 좋아요

진짜 감사합니다…ㅠㅠ
저도 글 작성자분과 같은 문제로 계속 안되서 답답했는데…

저는 두개 버튼이 있고 1번 버튼 누르면 1번에 해당하는 지도, 2번 버튼 누르면 2번에 해당하는 지도가 나오게 하는데
default는 1번 버튼이라 1번지도는 잘 나오지만
2번을 누르니 지도가 짤리더라구요.
그래서 relayout을 넣어줬는데 이제는 center를 잡지못해 고생했는데 ㅠㅠ
map.setCenter(new daum.maps.LatLng(36.0701, 127.570667)) 이렇게 제 주소에 맞게 넣으니 센터 잘 잡아주네요 !! 감사합니다.

1개의 좋아요