다음지도 마커 클러스터러 게시판 list.skin.php 지도가 정상표시 왜 안되죠?
안녕하세요~ 선배님들~~
만년 좌충우돌 세네기 입니다~~
지도 게시판 사용하려고
선배님들이 만들어놓으신
다음지도 게시판 스킨 올려져있는들 참고하여
https://sir.kr/g5_skin/25403?sfl=wr_subject%7C%7Cwr_content&stx=%EC%A7%80%EB%8F%84&page=2">https://sir.kr/g5_skin/25403?sfl=wr_subject%7C%7Cwr_content&stx=%EC%A7%80%EB%8F%84&page=2
일부 다른 게시판 스킨에 있는 것도 조금 짜집기하여~
다음지도 마커 클러스터러를 만들어보고 있는데
저장해놓은 내용을 list 게시판에 가져와서 지도에 뿌려주지 못하네요~
지도는 정상적으로 잘~ 나옵니다.
그러나 DB에 저장되어있는 지도내용 값은 불러오지 못합니다 ( 다른 지도 스킨 사용하면 잘~ 보입니다)
아는게 없다보니까 어떻게 수습해야 될지 막막하네요~ 초보의 길은 멀고 멀게만 느껴지네요~
http://apis.map.kakao.com/web/sample/addClustererClickEvent/">http://apis.map.kakao.com/web/sample/addClustererClickEvent/
https://ygh6577.tistory.com/27#recentComments">https://ygh6577.tistory.com/27#recentComments
내용도 참고해서 같이 적용해 보고있는데~ 출구가 안보이네요~
$.get("http://apis.map.daum.net/download/web/data/chicken.json", function(data)
부분도 어떻게 처리해야할지 막막하구요~~
선배님들~ 어떻게 해결해야 할지 조언 부탁드립니다~~
list.skin.php 윗쪽에서부터 지도 있는 부분까지 긁어서 올려봅니다~
(소스 내용이 많이 지저분합니다. 이해해주세요 ~.~ )
감사합니다~~~ [꾸벅]
$sfl_t = "내용검색"; $sfl_v = "wr_content";
if($write[wr_8] == null){$write[wr_8] = 37.566400714093284;} if($write[wr_9] == null){$write[wr_9] = 126.9785391897507;} ?> " target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-1.12.4.min.js">
var map = new daum.maps.Map(document.getElementById('map'), { // 지도를 표시할 div center : new daum.maps.LatLng(37.566400714093284, 126.9785391897507), // 지도의 중심좌표 level : 10 // 지도의 확대 레벨 });
var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다 var mapTypeControl = new daum.maps.MapTypeControl();
// 지도에 컨트롤을 추가해야 지도위에 표시됩니다 // daum.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다 map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다 var zoomControl = new daum.maps.ZoomControl(); map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);
// 마커 클러스터러를 생성합니다 // 마커 클러스터러를 생성할 때 disableClickZoom 값을 true로 지정하지 않은 경우 // 클러스터 마커를 클릭했을 때 클러스터 객체가 포함하는 마커들이 모두 잘 보이도록 지도의 레벨과 영역을 변경합니다 // 이 예제에서는 disableClickZoom 값을 true로 설정하여 기본 클릭 동작을 막고 // 클러스터 마커를 클릭했을 때 클릭된 클러스터 마커의 위치를 기준으로 지도를 1레벨씩 확대합니다 var clusterer = new daum.maps.MarkerClusterer({ map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체 averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정 minLevel: 10, // 클러스터 할 최소 지도 레벨 disableClickZoom: true // 클러스터 마커를 클릭했을 때 지도가 확대되지 않도록 설정한다 });
$sql = " select * from {$write_table} order by wr_id asc "; $result = sql_query($sql); $cnt = 0; while ($row = sql_fetch_array($result)) { if($row[wr_8] && $row[wr_9]) { ?>
// 데이터에서 좌표 값을 가지고 마커를 표시합니다 // 마커 클러스터러로 관리할 마커 객체는 생성할 때 지도 객체를 설정하지 않습니다 var markers = $(data.positions).map(function(i, position) { return new daum.maps.Marker({ position : new daum.maps.LatLng(=$row[wr_8]?>, =$row[wr_9]?>) }); });
// 클러스터러에 마커들을 추가합니다 clusterer.addMarkers(markers);
// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다 // 이벤트 리스너로는 클로저를 만들어 등록합니다 // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다 daum.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow)); daum.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow)); // 마커 클러스터러에 클릭이벤트를 등록합니다 // 마커 클러스터러를 생성할 때 disableClickZoom을 true로 설정하지 않은 경우 // 이벤트 헨들러로 cluster 객체가 넘어오지 않을 수도 있습니다 daum.maps.event.addListener(clusterer, 'clusterclick', function(cluster) {
// 현재 지도 레벨에서 1레벨 확대한 레벨 var level = map.getLevel()-1;
// 지도를 클릭된 클러스터의 마커의 위치를 기준으로 확대합니다 map.setLevel(level, {anchor: cluster.getCenter()}); window.open("./board.php?bo_table==$bo_table?>&wr_id="+=$row[wr_id]?>); // 새로운창에서 띄우기 }); $cnt++; } }
?>
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다 function makeOverListener(map, marker, infowindow) { return function() { infowindow.open(map, marker); }; }
// 인포윈도우를 닫는 클로저를 만드는 함수입니다 function makeOutListener(infowindow) { return function() { infowindow.close(); }; }
답변 2개
일단 클러스터에 마커를 하나의 배열로 넣어보시는게 좋을거 같아요.
저리 반복문안에서 마커배열을 개별적으로 생성하는게 되는지는 저도 테스트 못해봤어요.
약간 정리해보자면
... 상단 생략 ...
</p>
<p> </p>
<p>// 클러스터 생성
var clusterer = new daum.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 10, // 클러스터 할 최소 지도 레벨
disableClickZoom: true // 클러스터 마커를 클릭했을 때 지도가 확대되지 않도록 설정한다
});</p>
<p>// 마커들의 전체 배열
var markers = new Array();</p>
<p>// 반복문 내에서는 마커 전체 배열에 마커를 하나씩 넣어줌
<?
$sql = " select * from {$write_table} order by wr_id asc ";
$result = sql_query($sql);
$cnt = 0;
while ($row = sql_fetch_array($result))
{
if($row[wr_8] && $row[wr_9])
{
?>
// 개별 마커 생성
var marker = new daum.maps.Marker({
map: map,
position: new daum.maps.LatLng('<?=$row[wr_8]?>', '<?=$row[wr_9]?>'); // 따옴표는 한번 체크할것
});</p>
<p> // 개별 마커에 이벤트 붙이기
daum.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
daum.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));</p>
<p> </p>
<p> // 클러스터를 위한 마커배열에 마커들 담기
markers.push(marker);</p>
<p> </p>
<p><?
$cnt++;
}
}
?></p>
<p>// 마커배열이 있다면
if(markers.length > 0) {</p>
<p> // 클러스터에 마커배열 추가(반복문 밖에서)
clusterer.addMarkers(markers);</p>
<p> // 마커 클러스터러에 클릭이벤트를 등록합니다
daum.maps.event.addListener(clusterer, 'clusterclick', function(cluster) {
// 현재 지도 레벨에서 1레벨 확대한 레벨
var level = map.getLevel()-1;
// 확대합니다
map.setLevel(level, {anchor: cluster.getCenter()});
// 마커 클러스터 클릭이벤트에서 왜 새로운 창을 띄우려고 하는가??
window.open("./board.php?bo_table=<?=$bo_table?>&wr_id="+<?=$row[wr_id]?>); // 새로운창에서 띄우기
}); </p>
<p>}</p>
<p>
.... 이후 makeOverListener 함수부터 .... 생략
하나 궁금한건 마커 클러스터 확대 이벤트에서 왜 새 창을 띄우려고 하시는지
암튼 잘 되면 좋겠네요.
추가로 먼저 댓글주신 분 링크를 보니 daum.map 이 kakao.map으로 바뀐거 같기도 하고 하니 것두 함 체크해보세요.
답변에 대한 댓글 2개
이건 자바스크립트 오류를 잡는게 빠를거 같네요.
html 소스를 올려주시면 테스트를 해볼 수 있으니 새 질문으로 올리시던지 아님 댓글로 올리시던지.
찍어야할 좌표가 아주 많으면 쿼리문에 limit 걸어서 한 10개 정도로.
댓글을 작성하려면 로그인이 필요합니다.
http://apis.map.kakao.com/web/sample/multipleMarkerImage/">http://apis.map.kakao.com/web/sample/multipleMarkerImage/
이걸 활용해서 최신 소스로 수정해보세요.
답변에 대한 댓글 2개
위에서 질문 글 작성할때 말씀드렸던
https://sir.kr/g5_skin/25403?sfl=wr_subject%7C%7Cwr_content&stx=%EC%A7%80%EB%8F%84&page=2
여러개 마커 표시하기 게시판 현재
코리아웹글로벌님이 만들어주신 게시판 스킨을
사용중 입니다(위에 링크주소 참고)
그러나
멀티 클러스터러 적용하기를 희망하여
list.skin 수정해보았으나 정상적으로 보이지않아 문의드렸습니다~~
제가 질문 설명이 부족했네요~~
eyekiss 님 감사합니다~~
소스를 수정하길 권해드린 거구요..
안되시면 쪽지 주세요..
저렴한 비용으로 처리해드릴께요..^^;;
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
말씀해주신 내용으로 적용을 해보아도 적용이 안되네요~.ㅜ
출구가 보이지 않네요~~ 마커 클러스터 적용하는것
마음을 내려놔야하나보네요~~
선배님들 & 고수님들 적용하신분 있으시면 방법이라도 가르쳐 주시면 감사감사 드립니다~~ [꾸벅]