구글맵[버전0_2]-지도맵안에 있는 마커수 클러스터 및 사이드바 출력 > 그누보드5 스킨

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

구글맵[버전0_2]-지도맵안에 있는 마커수 클러스터 및 사이드바 출력 정보

게시판 구글맵[버전0_2]-지도맵안에 있는 마커수 클러스터 및 사이드바 출력

첨부파일

googlemap_0_2.zip (65.1K) 403회 다운로드 2017-12-06 21:00:18 포인트 차감1

본문

안녕하세요.

최근에 다시 손 볼 일이 있어 건들어봤다가 0_1버전에 큰 문제가 있는걸 발견하고 수정하는 김에

마커 이미지와 클릭시 마커 이미지를 변경하여 0_2 버전으로 올려봅니다.

여름에 처음 올리고 겨울에 또다시 한번 올려보네요.ㅡ,.,ㅡ

날씨가 무척 춥습니다. 따뜻한 하루 보내시고 마감하세요.

    ----------------------------------------------------------

    패치버전 googlemap_0_2 (2017-12-06)
    - 수정사항
    사이드바에서 클릭시 트리거 이벤트를 취할 경우 단일 마커는 이상이 없으나 클러스터링이 된 지역은 문제 발생
    트리거 대신 맵에 다시 새로운 마커 생성 또는 삭제로 대처

    - 추가사항
    ■ 기본마커 및 클러스터링 색상 이미지변경, 클릭시 gif 이미지로 대처
    ■ 사이드바 클릭시 평선 추가 

    - 남아있는 문제점
    ■ 클러스터링안에 마커가 밑으로 가는 문제. zindex는 안되고 오버레이를 사용하라는데 
    좀 더 풀어야 할 숙제인듯 합니다.

    ----------------------------------------------------------
    최초 배포버전 googlemap_0_1 2017-06-19
    사이드바를 원하시는 분들을 위해  정적인손님 스킨 토대로
    리스트 페이지만 커스텀하여 구글 API 로 구현해 봤습니다.

    현재 이 스킨은 실시간이 아니 db에서 바로 출력하는 형식으로 되어 있습니다.
    실시간 쿼리 날리는것은 db 부담감이 있어 값을 바로 불려왔으나
    ajax로 따로 배열을 만들어 출력하면 바로 실시간으로 변경가능합니다.

    맵안에 있는 마커 수 만큼 사이드에 비동기적으로 show 하거나
    hide 으로 구현되어 있습니다.

    기본 로직
    1.지도 맵 생성
    2.DB에서 마커배열 생성
    3.클러스터링
    4.DB에서 사이드바 리스트 출력 
    (2번 일차원 배열에서 바로 사이드바를 생성할 수 있으나
    좀 더 쉽게  더보기 또는 무한 스크롤을 구현하기 위해 따로 분리 )

    현재 이 스킨은 극히 제 주관적인 관점에서 정적인손님의 스킨을 현재위치와 페이징 되는 부분을
    제외 시켜 limit 목록수 제한을 두지 않고 지도에 바로 뿌려 주도록 하였습니다.
    또한 사이드바가 리스트를 대처하기 때문에 리스트 부분은 관리자만 볼 수 있도록 처리
    했습니다.

    사이드바 목록 제한은 무한 스크롤을 구현할때 이용됩니다.
    현재 이 스킨에서는 무한 스크롤이 포함되지 않았으나 예제링크에서는 
    사이드바에 무한 스크롤을 적용하였으니 참고하시면 될 듯 합니다. 
    
    기본 골격이지만 어느정도 원하시는 형태로 가능할거라 생각하며
    고수분들께서 좀 더 다듬어  멋진 스킨이 나오기를 기대해 봅니다.     

추천
21

댓글 전체

완전 신기하네요! 응용할때 너무 좋겠어요! 구글만 이렇게 되는거겠죠...네이버나 다음도 이런 기능이 있으면 너무 좋을텐데...멋져요
분류별 아이콘 변경은 저번 질문질답에 답변을 참고하시면 되고요

분류 변수가 sca 라고 가정할때 (링크방식) 입니다.
테이블명 뒤에 사용하고자 하는 변수값을 넣어주세요.

162줄과 325줄에 아래와 같은 코드가 있을거에요
-----------------162줄
$sql = " Select wr_id,wr_subject,wr_3,wr_4,wr_2,substring(wr_datetime,1,10) as date,wr_hit From g5_write_$bo_table ";

이 부분을 주석처리 해주시고 아래처럼 변경해 주시면 됩니다.
$sql = " Select wr_id,wr_subject,wr_3,wr_4,wr_2,substring(wr_datetime,1,10) as date,wr_hit,ca_name From g5_write_$bo_table where ca_name like '%$sca%' ";

----------------325줄
$sql = " Select wr_id,wr_subject From g5_write_$bo_table"
이 부분을 주석처리 해주시고 아래처럼 변경
;
$sql = " Select wr_id,wr_subject From g5_write_$bo_table where ca_name like '%$sca%'";

수고하세요
ca_name 말고 wr_5로 분류를 따로 셀렉박스를 만들었느데
wr_5분류에따라 변경은 어케하는지용..sca부분을 바꿔봐도 변동이없어서여ㅜㅜ

 정적인손님 스킨에서 리스트는 10개나오더라도 지도부분은  db양이 100개이면 100개 다  뿌려주는 방법만 소스 추가할수 없을까요
어럽게 생각하지 마세요.
변수값이 wr_5 라고 하면 ca_name 를 wr_5 로 변경하시면 됩니다.
링크를 클릭하면 뒤에 분류 파라미터가 붙는 값으로 대처하시면 되겠습니다.

기존 정적인 손님 님의 스킨은 제한을 두고 있지만 제건 limlt를 제한 두지 않은 소스입니다.
참고로 질문은 질문질답게시판을 이용해주세요.. ^^ 많은 분들이 답글을 달아 주실것입니다.
답변 감사합니다 군악님 ㅠㅠ관련소스를 군악님께서 더마니아실거라 생각되어 여기에 추가질문을 올리게되네요 ㅠㅠ마지막으로 클러스터링을 안하게하는방법만 알려주심 안될까요
단일 마커로 할 경우 원칙적으로는 클러스터링 부분은 다 걷어내야 하지만 다시 짜야 하기 때문에 그 부분은 좀 힘들고요... 그냥 몇군데만 고쳐서 단일마커로 사용하게끔 답변 드립니다..보장은...ㅜ,.ㅡ 못해 드려요
마커 부분에 map:map 을 추가 해주시고요,
mc.addMarker(marker);을 주석처리 해주세요.

-----------------------------------215줄에 이 부분을
for (var i = 0; i < locations.length; i++) {
var data = locations[i];
myLatLng = new google.maps.LatLng(data[1], data[2]);//좌표
marker = new google.maps.Marker({
position: myLatLng, //좌표
icon: getIcon(data[4]), //아이콘
optimized: false,
  opacity: 0.8
});

//인포내용 정보
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {

//클러스터 지역내에 마커 이미지 체인지
activeMarker && activeMarker.setIcon(getIcon(markers[i]));
marker.setIcon(iconSelected);

//다른 마커클릭시 원래 이미지 복귀
activeMarker = marker;

//인포창(말풍선 설정)
infowindow.setContent("<div id='infobox'><h2>제목 : "+locations[i][0]+"</h2>"+locations[i][5]+"<p>"+locations[i][6]+"</p><p style='width: 100%;clear: both;'>등록일 :" +locations[i][7]+" / 조회수 : "+locations[i][8]+"<span class='btn'><a href='./board.php?bo_table=<?php echo $bo_table ?>&wr_id="+locations[i][9]+"'>상세보기</a></span></span></div>");
infowindow.open(map, marker); //인포창 열기
marker.setMap(map); //할당
clearOverlays_map(i); //할당된 마커(숨기기) 평선
}
})(marker, i));
markers.push(marker); //마커푸시
mc.addMarker(marker); //마커클러스터링
}
}
----------------------------------------------------- 이렇게 변경 해 주세요.
for (var i = 0; i < locations.length; i++) {
var data = locations[i];
myLatLng = new google.maps.LatLng(data[1], data[2]);//좌표
marker = new google.maps.Marker({
position: myLatLng, //좌표
icon: getIcon(data[4]), //아이콘
optimized: false,
                map:map,
opacity: 0.8
});

//인포내용 정보
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {

//클러스터 지역내에 마커 이미지 체인지
activeMarker && activeMarker.setIcon(getIcon(markers[i]));
marker.setIcon(iconSelected);

//다른 마커클릭시 원래 이미지 복귀
activeMarker = marker;

//인포창(말풍선 설정)
infowindow.setContent("<div id='infobox'><h2>제목 : "+locations[i][0]+"</h2>"+locations[i][5]+"<p>"+locations[i][6]+"</p><p style='width: 100%;clear: both;'>등록일 :" +locations[i][7]+" / 조회수 : "+locations[i][8]+"<span class='btn'><a href='./board.php?bo_table=<?php echo $bo_table ?>&wr_id="+locations[i][9]+"'>상세보기</a></span></span></div>");
infowindow.open(map, marker); //인포창 열기
marker.setMap(map); //할당
clearOverlays_map(i); //할당된 마커(숨기기) 평선
}
})(marker, i));
markers.push(marker); //마커푸시
//mc.addMarker(marker); //마커클러스터링
}
}

이렇게 변경해 주시면 클러스터링은 되지 않을거에요
1. " Select wr_id,wr_subject,wr_3,wr_4,wr_2,substring(wr_datetime,1,10) as date,wr_hit,wr_5 From g5_write_$bo_table where wr_5 like '%$wr_5%'";

 

2.$sql = " Select wr_id,wr_subject From g5_write_$bo_table where wr_5 like '%$wr_5%'";

이런식으로 1,2 부분을 수정해서 wr_5로 셀렉박스 만든것을 선택하면 지도내서 분류가됫습니다.


wr_5분류후 wr_10분류를 하고 나타나게 하려합니다
추가로 wr_10 분류해서 db분류되게 뒤에 1,2부분에 추가로 어케넣어야할까요
그리고 분류별로 마커변경이 안되네용..ㅠㅠ
호딸붐님 우선 mysql 부터 한번 구경해 보세요...
https://www.w3schools.com/sql/default.asp

분류별 마커는 답변 드린 내용 그대로 하시면 됩니다.
https://sir.kr/qa/215721

참고적으로 이 소스를
1. " Select wr_id,wr_subject,wr_3,wr_4,wr_2,substring(wr_datetime,1,10) as date,wr_hit,wr_5 From g5_write_$bo_table where wr_5 like '%$wr_5%'";

2.$sql = " Select wr_id,wr_subject From g5_write_$bo_table where wr_5 like '%$wr_5%'"

------------------------------ 아래처럼 해보세요
1. " Select wr_id,wr_subject,wr_3,wr_4,wr_2,substring(wr_datetime,1,10) as date,wr_hit,wr_5,$wr_10 From g5_write_$bo_table where wr_5 like '%$wr_5%' and wr_10 like '%$wr_10%' ";

2.$sql = " Select wr_id,wr_subject,,wr_5,$wr_10 From g5_write_$bo_table where wr_5 like '%$wr_5%' and wr_10 like '%$wr_10%' ";

어떤 용도로 만드시는지 모르겠지만 대략 이정도로 하시면 될거 같고요 제가 열려드린 첫번째 주소는 입문자 용으로써 예제까지 있으니 참고 삼아 한번 구경해 보세요
지도맵 아주 좋네요
그런데 검색했을때 지도 맵이 기준점인 서울에 계속있고 예를 들어 부산쪽 주소지를 만들어서 게시판생성후 부산으로 검색하면 리스트맵이 부산으로 안가구 계속 서울쪽에만 있는거 원래 그런건가요 ㅜㅜ?
해당 맵으로 이동되야 사이드바도 변하는거 같은데 검색해도 지도는 변화가 없네요 ㅜㅜ
최고입니다! 감사합니다! 한가지 문의 드릴게 있는데요
리스트뷰에서 처음 시작점이 본인 현재 위치로 표시하려면 어떻게 해야 할까요?ㅠㅠ
전체 2,423 |RSS
그누보드5 스킨 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT