지도 고정하기 채택완료

</p><p>var mapWrapper = document.getElementById('mapWrapper'); //지도를 감싸고 있는 DIV태그</p><p>
</p><p>var mapContainer = document.getElementById('map'), // 지도를 표시할 div </p><p>    mapCenter = new daum.maps.LatLng(35.1152427,129.0404083), // 지도의 가운데 좌표</p><p>    mapOption = {</p><p>        center: mapCenter, // 지도의 중심좌표</p><p>        level: 3 // 지도의 확대 레벨</p><p>    };</p><p>
</p><p>// 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다</p><p>var map = new daum.maps.Map(mapContainer, mapOption);</p><p>map.addOverlayMapTypeId(daum.maps.MapTypeId.ROADVIEW); //지도 위에 로드뷰 도로 올리기</p><p>
</p><p>var rvContainer = document.getElementById('roadview'); //로드뷰를 표시할 div</p><p>var rv = new daum.maps.Roadview(rvContainer); //로드뷰 객체</p><p>var rvClient = new daum.maps.RoadviewClient(); //좌표로부터 로드뷰 파노ID를 가져올 로드뷰 helper객체</p><p>
</p><p>toggleRoadview(mapCenter);</p><p>
</p><p>// 마커 이미지를 생성합니다.</p><p>var markImage = new daum.maps.MarkerImage(</p><p>        '<a href="<a href="http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/roadview_wk.png" target="_blank" rel="noopener noreferrer">http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/roadview_wk.png</a>"><a href="http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/roadview_wk.png" target="_blank" rel="noopener noreferrer">http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/roadview_wk.png</a></a>',</p><p>        new daum.maps.Size(35,39),</p><p>        {</p><p>            //마커의 좌표에 해당하는 이미지의 위치를 설정합니다.</p><p>            //이미지의 모양에 따라 값은 다를 수 있으나, 보통 width/2, height를 주면 좌표에 이미지의 하단 중앙이 올라가게 됩니다.</p><p>           </p><p>        }</p><p>);</p><p>
</p><p>// 드래그가 가능한 마커를 생성합니다.</p><p>var rvMarker = new daum.maps.Marker({</p><p>    image : markImage,</p><p>    position: mapCenter,</p><p>    draggable: true,</p><p>    map: map</p><p>});</p><p>
</p><p>//마커에 dragend 이벤트를 할당합니다</p><p>daum.maps.event.addListener(rvMarker, 'dragend', function(mouseEvent) {</p><p>    var position = rvMarker.getPosition(); //현재 마커가 놓인 자리의 좌표</p><p>    toggleRoadview(position); //로드뷰를 토글합니다</p><p>});</p><p>
</p><p>//지도에 클릭 이벤트를 할당합니다</p><p>daum.maps.event.addListener(map, 'click', function(mouseEvent){</p><p>    </p><p>    // 현재 클릭한 부분의 좌표를 리턴 </p><p>    var position = mouseEvent.latLng; </p><p>
</p><p>    rvMarker.setPosition(position);</p><p>    toggleRoadview(position); //로드뷰를 토글합니다</p><p>});</p><p>
</p><p>//로드뷰 toggle함수</p><p>function toggleRoadview(position){</p><p>
</p><p>    //전달받은 좌표(position)에 가까운 로드뷰의 panoId를 추출하여 로드뷰를 띄웁니다</p><p>    rvClient.getNearestPanoId(position, 50, function(panoId) {</p><p>        if (panoId === null) {</p><p>            rvContainer.style.display = 'none'; //로드뷰를 넣은 컨테이너를 숨깁니다</p><p>            mapWrapper.style.width = '100%';</p><p>            map.relayout();</p><p>        } else {</p><p>            mapWrapper.style.width = '100%';</p><p>            map.relayout(); //지도를 감싸고 있는 영역이 변경됨에 따라, 지도를 재배열합니다</p><p>            rvContainer.style.display = 'block'; //로드뷰를 넣은 컨테이너를 보이게합니다</p><p>            rv.setPanoId(panoId, position); //panoId를 통한 로드뷰 실행</p><p>            rv.relayout(); //로드뷰를 감싸고 있는 영역이 변경됨에 따라, 로드뷰를 재배열합니다</p><p>        }</p><p>    });</p><p>}</p><p></script></p><p>