초보개발자입니다!
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을 넣고 시작해도 마커가 지도 중앙에 잘 나옵니다.
어…음 제가 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
지금 현상태입니다.
보시게 되면
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을 보내주시거나
코드 전문을 보내주세요.
노출을 원치 않으시면 제 아이디 클릭해서 메세지로 보내주세요.
아 제 설명이 부족했던것같습니다…
예를 들면 만약
제주 금호리조트 관련 해서 지역명이 생기면 거기를 클릭할시(토글방식)
밑에 디스플레이 논방식으로 있던 지도가 나와서 보여지는 방식으로 설정을 해놓은 상태입니다.
/////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////
map.relayout();
이건 잘 된건데요.
map.setCenter(coords);
이게 안 된 상황이고
지도 중심을 마커의 위치로 다시금 지정해 주셔야 합니다.
진짜 감사합니다…ㅠㅠ
저도 글 작성자분과 같은 문제로 계속 안되서 답답했는데…
저는 두개 버튼이 있고 1번 버튼 누르면 1번에 해당하는 지도, 2번 버튼 누르면 2번에 해당하는 지도가 나오게 하는데
default는 1번 버튼이라 1번지도는 잘 나오지만
2번을 누르니 지도가 짤리더라구요.
그래서 relayout을 넣어줬는데 이제는 center를 잡지못해 고생했는데 ㅠㅠ
map.setCenter(new daum.maps.LatLng(36.0701, 127.570667)) 이렇게 제 주소에 맞게 넣으니 센터 잘 잡아주네요 !! 감사합니다.