애플시나
20
2019-05-13 21:10:59
9
162

다음지도 질문입니다... 도와주세요!



<%@ page language="java" contentType="text/html; charset=UTF-8"

 pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>



</head>

<body>





<p style="margin-top:-12px">

    <em class="link">

        <a href="javascript:void(0);" onclick="window.open('http://fiy.daum.net/fiy/map/CsGeneral.daum', '_blank', 'width=981, height=650')">

        </a>

    </em>

</p>

<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>

</body>

</html>


////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////



function map_v(){

	   $( '#map-view' ).toggle();

	   map.relayout();

}



////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////




div id="map-name" onclick="map_v()">

						<div class="map-toggle">

							<p class="map_view"> 

							제주도	

							</p>

						</div>

					</div>

			    <div style="width:200px; height:auto; float:right;"><span class="room_price" style="float:right;">${hotelinfoList.getMinPrice() }원</span></div>

			    <div style="width:700px; height:auto; float:right;"><span class="room_btn" style="float:right;"><input type="button" value="예약" class="listblog-button"></span></div>
    
			    </div>

			</div>

			</article> <!-- /.blog-item -->

			<div class="clear"></div>

			<!-- 지도 상세페이지 -->

			<div class="map" id="map-view" 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>

			<!-- 지도 상세페이지 -->





지금 이렇게 코드가 짜여져있는 상태입니다.


DB에 저장된 주소값을 불러와 지도를 표시를 하는데...


아래 사진처럼 display:none 값을 주지 않으면 정상적으로 위치가 표시가 되지만




아래 사진처럼 display:none 값을 주게 되면 마커가 중심좌표로 받지 않는 상태가 일어납니다... ㅠㅠ



카카오 DevTalk에서의 답변을 보았지만서도.. 도무지 해결이 안되는 상태인데 혹시 이런적있으셨던분 계신가요 ㅠㅠ

0
0
  • 답변 9

  • rezigrene
    848
    2019-05-13 22:37:07

    toggle() 아래에 

    map.center()

    도 호출해주셔야할듯



    0
  • 애플시나
    20
    2019-05-13 22:53:37

    답변 감사드립니다!!!!!


    토글아래에 map.center() 를 호출하게되면 layout()이 안먹히는 현상이 발생합니다 ㅠㅠ


    그래서 layout() 밑에 잡게되면 안넣었을때랑 동일증상입니다 ㅠ

    0
  • 애플시나
    20
    2019-05-13 22:54:31

    부가적으로 설명을 더 드리면 map.jsp가 따로있고 list.jsp 페이지가 따로있는 상태입니다.


    0
  • rezigrene
    848
    2019-05-13 23:03:13 작성 2019-05-13 23:04:05 수정됨

    제가. api도 안보고 밀씀드렸네요.. 순서는 다음처럼 하셔야할겁니다..

    ...toggle();

    map.relayout();  

    map.setCenter(앞에서 지정했던값);

    0
  • rezigrene
    848
    2019-05-13 23:09:08

    쉽게 해결하는방법은 coords 를 전역변수로 빼고

    map.setCenter(coords); 와같이 하는 방법이겠네요.

     

    0
  • rezigrene
    848
    2019-05-13 23:15:42


    var coords = map.getCenter();

    map.relayout();  

    map.setCenter(coords);

    1
  • 애플시나
    20
    2019-05-13 23:23:39
    감사합니다!! 한번 실행해보도록 하겠습니다!
    0
  • 애플시나
    20
    2019-05-14 00:03:03

    감사합니다!! 덕분에 잘 해결했습니다! 정말 감사합니다!

    0
  • 애플시나
    20
    2019-05-14 00:12:34

    다들 저보다 잘 아시겠지만 해결못하시는 분들을 위해서 남깁니다.

    이렇게 앞에 var를 없애고 다른페이지에서 map.setCenter(coords); 호출을 하니 정상작동 되었습니다!

    coords = new daum.maps.LatLng(result[0].y, result[0].x);
    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.