펄스나인님 다중마커 지도 스킨 질문입니다.

펄스나인님 다중마커 지도 스킨 질문입니다.

QA

펄스나인님 다중마커 지도 스킨 질문입니다.

그누보드5(영카트) 버전

5.5.8.2.2

사용 PHP 버전

7.4

본문

그누보드 스킨으로 적용해서

약간 커스텀하여 사용중입니다.

 

위치보기 클릭 시에는 panTo 정상적으로 마커 위치로 이동되는데, 지도 위에 마커를 클릭 시 아무 반응이 없습니다. 커서도 grabCursor 그대로구요..

 

list.skin.php 에 무슨 문제가 있나요? ㅠㅠ

 


<?php
if (!defined('_GNUBOARD_')) exit;
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
 
function get_board_sfl_select_options2($sfl){
    global $is_admin;
    $str = '';
 
    $str .= '<option value="wr_subject||wr_3||wr_4" '.get_selected($sfl, 'wr_subject||wr_3||wr_4').'>업체명+주소</option>';
    $str .= '<option value="wr_subject" '.get_selected($sfl, 'wr_subject', true).'>업체명</option>';
    $str .= '<option value="wr_3||wr_4" '.get_selected($sfl, 'wr_3||wr_4').'>주소</option>';
    $str .= '<option value="wr_2" '.get_selected($sfl, 'wr_2', true).'>대표전화</option>';
   
    return run_replace('get_board_sfl_select_options2', $str, $sfl);
}
 
$colspan = 5;
 
if ($is_checkbox) $colspan++;
if ($is_good) $colspan++;
if ($is_nogood) $colspan++;
 
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);

 
$lat = 36.556400714093284; // 초기 및 리셋 중심좌표
$lng = 126.9785391897507; // 초기 및 리셋 중심좌표
?>

 
<!-- 게시판 목록 시작 { -->
<div id="bo_list">
 
    <div id="map" data-aos="fade-up" data-aos-delay="0" data-aos-offset="0"></div>
 
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<?php echo $board['bo_1'] ?>&libraries=services"></script>
    <!-- } -->
 
    <script>
        var mapContainer = document.getElementById('map'), // 지도를 표시할 div
        mapOption = {
            center: new kakao.maps.LatLng(<?php echo $lat ?: '36.556400'; ?>, <?php echo $lng ?: '126.978539'; ?>), // 지도의 중심좌표 (기본값 추가)
            level: 13 // 지도 초기 확대레벨
        };
 
    var map = new kakao.maps.Map(mapContainer, mapOption);
 
    <?php
    $gu = htmlspecialchars(str_replace("/", "", $_GET['gubun']), ENT_QUOTES, 'UTF-8'); // XSS 방지
 
    if ($_GET['gubun'] == "") {
        $sql = "SELECT * FROM g5_write_" . $bo_table . " ORDER BY wr_id ASC";
    } else {
        $sql = "SELECT * FROM g5_write_" . $bo_table . " WHERE ca_name='" . $gu . "' ORDER BY wr_id ASC";
    }
 
    $result = sql_query($sql);
    $cnt = 0;
    while ($row = sql_fetch_array($result)) {
        if ($row['wr_5'] && $row['wr_6']) {
            $thumb = get_list_thumbnail($board['bo_table'], $row['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], false, true);
            $img_content = $thumb['src'] ?: '';
    ?>
        // 마커 이미지 설정
        <?php if ($row['wr_1'] == "markerStar1") { ?>
        var imageSrc = '<?php echo $board_skin_url ?>/img/markerStar1.png';
        <?php } else if ($row['wr_1'] == "markerStar2") { ?>
        var imageSrc = '<?php echo $board_skin_url ?>/img/markerStar2.png';
        <?php } else if ($row['wr_1'] == "markerStar3") { ?>
        var imageSrc = '<?php echo $board_skin_url ?>/img/markerStar3.png';
        <?php } else if ($row['wr_1'] == "markerStar4") { ?>
        var imageSrc = '<?php echo $board_skin_url ?>/img/markerStar4.png';
        <?php } else if ($row['wr_1'] == "markerStar5") { ?>
        var imageSrc = '<?php echo $board_skin_url ?>/img/markerStar5.png';
        <?php } else { ?>
        var imageSrc = '<?php echo $board_skin_url ?>/img/markerStar6.png';
        <?php } ?>
 
        var imageSize = new kakao.maps.Size(24, 35), // 마커이미지의 크기
            imageOption = { offset: new kakao.maps.Point(12, 35) }; // 마커이미지의 옵션
 
        // 마커의 이미지정보를 가지고 있는 마커이미지 생성
        var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
            markerPosition = new kakao.maps.LatLng(<?php echo $row['wr_5'] ?>, <?php echo $row['wr_6'] ?>); // 마커가 표시될 위치
 
        // 마커 생성
        var marker = new kakao.maps.Marker({
            position: markerPosition,
            image: markerImage,
            clickable: true
        });
 
        // 마커가 지도 위에 표시되도록 설정
        marker.setMap(map);
 
        // 커스텀 오버레이에 표시할 컨텐츠
        var content = `
            <div class="wrap">
                <div class="info">
                    <div class="body">
                        <div class="desc" style="margin-left:10px;">
                            <img src="<?php echo $board_skin_url ?>/img/close_black_24dp.svg" class="close" onclick="closeOverlay_<?php echo $row['wr_id'] ?>()" title="닫기">
                            <div class="titles cut80"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $bo_table ?>&wr_id=<?php echo $row['wr_id']; ?>"><?php echo $row['wr_subject']; ?></a></div>
                            <div class="sub1 cut90"><?php echo $row['wr_3']; ?> <?php echo $row['wr_4']; ?></div>
                            <?php if ($row['wr_2']) { ?>
                            <div class="sub3 cut90"><a href="tel:<?php echo $row['wr_2']; ?>"><?php echo $row['wr_2']; ?></a></div>
                            <?php } else { ?>
                            <div class="sub2 cut90"><a href="<?php echo $row['wr_link1']; ?>" target="_blank"><?php echo $row['wr_link1']; ?></a></div>
                            <?php } ?>
                        </div>
                    </div>
                </div>
            </div>`;
 
        // 커스텀 오버레이 생성
        var overlay_<?php echo $row['wr_id'] ?> = new kakao.maps.CustomOverlay({
            content: content,
            map: null,
            position: new kakao.maps.LatLng(<?php echo $row['wr_5'] ?>, <?php echo $row['wr_6'] ?>),
            yAnchor: 1
        });
 
        // 마커 클릭 시 오버레이 표시
        kakao.maps.event.addListener(marker, 'click', function() {
            overlay_<?php echo $row['wr_id'] ?>.setMap(map);
        });
 
        // 오버레이 닫기 함수
        window.closeOverlay_<?php echo $row['wr_id'] ?> = function() {
            overlay_<?php echo $row['wr_id'] ?>.setMap(null);
        };
 
        overlay_<?php echo $row['wr_id'] ?>.setMap(null);
 
    <?php
            $cnt++;
        }
    } ?>
    </script>

이 질문에 댓글 쓰기 :

답변 3

아래의 코드를 한번 참고를 해보시겠어요

 

 

<?php
if (!defined('_GNUBOARD_')) exit;
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
 
function get_board_sfl_select_options2($sfl){
    global $is_admin;
    $str = '';
 
    $str .= '<option value="wr_subject||wr_3||wr_4" '.get_selected($sfl, 'wr_subject||wr_3||wr_4').'>업체명+주소</option>';
    $str .= '<option value="wr_subject" '.get_selected($sfl, 'wr_subject', true).'>업체명</option>';
    $str .= '<option value="wr_3||wr_4" '.get_selected($sfl, 'wr_3||wr_4').'>주소</option>';
    $str .= '<option value="wr_2" '.get_selected($sfl, 'wr_2', true).'>대표전화</option>';
   
    return run_replace('get_board_sfl_select_options2', $str, $sfl);
}
 
$colspan = 5;
 
if ($is_checkbox) $colspan++;
if ($is_good) $colspan++;
if ($is_nogood) $colspan++;
 
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);

 
$lat = 36.556400714093284; // 초기 및 리셋 중심좌표
$lng = 126.9785391897507; // 초기 및 리셋 중심좌표
?>

 
<!-- 게시판 목록 시작 { -->
<div id="bo_list">
 
    <div id="map" data-aos="fade-up" data-aos-delay="0" data-aos-offset="0"></div>
 
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<?php echo $board['bo_1'] ?>&libraries=services"></script>
    <!-- } -->
 
    <script>
        var mapContainer = document.getElementById('map'), // 지도를 표시할 div
        mapOption = {
            center: new kakao.maps.LatLng(<?php echo $lat ?: '36.556400'; ?>, <?php echo $lng ?: '126.978539'; ?>), // 지도의 중심좌표 (기본값 추가)
            level: 13 // 지도 초기 확대레벨
        };
 
    var map = new kakao.maps.Map(mapContainer, mapOption);
    var overlays = {}; // 오버레이를 저장할 객체
 
    <?php
    $gu = htmlspecialchars(str_replace("/", "", $_GET['gubun']), ENT_QUOTES, 'UTF-8'); // XSS 방지
 
    if ($_GET['gubun'] == "") {
        $sql = "SELECT * FROM g5_write_" . $bo_table . " ORDER BY wr_id ASC";
    } else {
        $sql = "SELECT * FROM g5_write_" . $bo_table . " WHERE ca_name='" . $gu . "' ORDER BY wr_id ASC";
    }
 
    $result = sql_query($sql);
    $cnt = 0;
    while ($row = sql_fetch_array($result)) {
        if ($row['wr_5'] && $row['wr_6']) {
            $thumb = get_list_thumbnail($board['bo_table'], $row['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], false, true);
            $img_content = $thumb['src'] ?: '';
    ?>
        // 마커 이미지 설정
        <?php if ($row['wr_1'] == "markerStar1") { ?>
        var imageSrc = '<?php echo $board_skin_url ?>/img/markerStar1.png';
        <?php } else if ($row['wr_1'] == "markerStar2") { ?>
        var imageSrc = '<?php echo $board_skin_url ?>/img/markerStar2.png';
        <?php } else if ($row['wr_1'] == "markerStar3") { ?>
        var imageSrc = '<?php echo $board_skin_url ?>/img/markerStar3.png';
        <?php } else if ($row['wr_1'] == "markerStar4") { ?>
        var imageSrc = '<?php echo $board_skin_url ?>/img/markerStar4.png';
        <?php } else if ($row['wr_1'] == "markerStar5") { ?>
        var imageSrc = '<?php echo $board_skin_url ?>/img/markerStar5.png';
        <?php } else { ?>
        var imageSrc = '<?php echo $board_skin_url ?>/img/markerStar6.png';
        <?php } ?>
 
        var imageSize = new kakao.maps.Size(24, 35), // 마커이미지의 크기
            imageOption = { offset: new kakao.maps.Point(12, 35) }; // 마커이미지의 옵션
 
        // 마커의 이미지정보를 가지고 있는 마커이미지 생성
        var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
            markerPosition = new kakao.maps.LatLng(<?php echo $row['wr_5'] ?>, <?php echo $row['wr_6'] ?>); // 마커가 표시될 위치
 
        // 마커 생성
        var marker<?php echo $row['wr_id'] ?> = new kakao.maps.Marker({
            position: markerPosition,
            image: markerImage,
            clickable: true
        });
 
        // 마커가 지도 위에 표시되도록 설정
        marker<?php echo $row['wr_id'] ?>.setMap(map);
 
        // 커스텀 오버레이에 표시할 컨텐츠
        var content = `
            <div class="wrap">
                <div class="info">
                    <div class="body">
                        <div class="desc" style="margin-left:10px;">
                            <img src="<?php echo $board_skin_url ?>/img/close_black_24dp.svg" class="close" onclick="closeOverlay(<?php echo $row['wr_id'] ?>)" title="닫기">
                            <div class="titles cut80"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $bo_table ?>&wr_id=<?php echo $row['wr_id']; ?>"><?php echo $row['wr_subject']; ?></a></div>
                            <div class="sub1 cut90"><?php echo $row['wr_3']; ?> <?php echo $row['wr_4']; ?></div>
                            <?php if ($row['wr_2']) { ?>
                            <div class="sub3 cut90"><a href="tel:<?php echo $row['wr_2']; ?>"><?php echo $row['wr_2']; ?></a></div>
                            <?php } else { ?>
                            <div class="sub2 cut90"><a href="<?php echo $row['wr_link1']; ?>" target="_blank"><?php echo $row['wr_link1']; ?></a></div>
                            <?php } ?>
                        </div>
                    </div>
                </div>
            </div>`;
 
        // 커스텀 오버레이 생성
        overlays[<?php echo $row['wr_id'] ?>] = new kakao.maps.CustomOverlay({
            content: content,
            map: null,
            position: new kakao.maps.LatLng(<?php echo $row['wr_5'] ?>, <?php echo $row['wr_6'] ?>),
            yAnchor: 1
        });
 
        // 마커에 클릭 이벤트 등록 (반드시 각 마커마다 고유하게 처리해야 함)
        (function(wrId) {
            kakao.maps.event.addListener(marker<?php echo $row['wr_id'] ?>, 'click', function() {
                // 클릭된 마커의 오버레이만 표시
                overlays[wrId].setMap(map);
            });
        })(<?php echo $row['wr_id'] ?>);
 
    <?php
            $cnt++;
        }
    } ?>

    // 전역 닫기 함수 정의
    function closeOverlay(wrId) {
        overlays[wrId].setMap(null);
    }
    </script>
</div>

 

 

 

PHP while 반복문에서 동적으로 생성되는 다수의 전역 함수와 변수들로 인한 스코프 관리 문제나

JavaScript 실행 오류가 발생해서 마커 클릭 이벤트가 제대로 작동하지 않았을 가능성이 있습니다.

 


<?php
if (!defined('_GNUBOARD_')) exit;
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
 
function get_board_sfl_select_options2($sfl){
    global $is_admin;
    $str = '';
 
    $str .= '<option value="wr_subject||wr_3||wr_4" '.get_selected($sfl, 'wr_subject||wr_3||wr_4').'>업체명+주소</option>';
    $str .= '<option value="wr_subject" '.get_selected($sfl, 'wr_subject', true).'>업체명</option>';
    $str .= '<option value="wr_3||wr_4" '.get_selected($sfl, 'wr_3||wr_4').'>주소</option>';
    $str .= '<option value="wr_2" '.get_selected($sfl, 'wr_2', true).'>대표전화</option>';
   
    return run_replace('get_board_sfl_select_options2', $str, $sfl);
}
 
$colspan = 5;
 
if ($is_checkbox) $colspan++;
if ($is_good) $colspan++;
if ($is_nogood) $colspan++;
 
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);
 
$lat = 36.556400714093284; // 초기 및 리셋 중심좌표
$lng = 126.9785391897507; // 초기 및 리셋 중심좌표
?>
 
<!-- 게시판 목록 시작 { -->
<div id="bo_list">
 
    <div id="map" data-aos="fade-up" data-aos-delay="0" data-aos-offset="0"></div>
 
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<?php echo $board['bo_1'] ?>&libraries=services"></script>
    <!-- } -->
 
    <script>
        var mapContainer = document.getElementById('map'), // 지도를 표시할 div
        mapOption = {
            center: new kakao.maps.LatLng(<?php echo $lat ?: '36.556400'; ?>, <?php echo $lng ?: '126.978539'; ?>), // 지도의 중심좌표 (기본값 추가)
            level: 13 // 지도 초기 확대레벨
        };
 
        var map = new kakao.maps.Map(mapContainer, mapOption);
        
        // 마커와 오버레이를 저장할 배열
        var markers = [];
        var overlays = [];
        <?php
        $gu = htmlspecialchars(str_replace("/", "", $_GET['gubun']), ENT_QUOTES, 'UTF-8'); // XSS 방지
     
        if ($_GET['gubun'] == "") {
            $sql = "SELECT * FROM g5_write_" . $bo_table . " ORDER BY wr_id ASC";
        } else {
            $sql = "SELECT * FROM g5_write_" . $bo_table . " WHERE ca_name='" . $gu . "' ORDER BY wr_id ASC";
        }
     
        $result = sql_query($sql);
        $cnt = 0;
        $marker_data = array(); // 마커 데이터를 저장할 배열
        
        while ($row = sql_fetch_array($result)) {
            if ($row['wr_5'] && $row['wr_6']) {
                $thumb = get_list_thumbnail($board['bo_table'], $row['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], false, true);
                $img_content = $thumb['src'] ?: '';
                
                // 마커 이미지 결정
                $marker_img = 'markerStar6.png'; // 기본값
                if (in_array($row['wr_1'], ['markerStar1', 'markerStar2', 'markerStar3', 'markerStar4', 'markerStar5'])) {
                    $marker_img = $row['wr_1'] . '.png';
                }
                
                // 마커 데이터 배열에 추가
                $marker_data[] = array(
                    'id' => $row['wr_id'],
                    'lat' => $row['wr_5'],
                    'lng' => $row['wr_6'],
                    'image' => $marker_img,
                    'subject' => addslashes($row['wr_subject']),
                    'addr1' => addslashes($row['wr_3']),
                    'addr2' => addslashes($row['wr_4']),
                    'phone' => addslashes($row['wr_2']),
                    'link' => addslashes($row['wr_link1'])
                );
                $cnt++;
            }
        }
        ?>
        
        // 마커 데이터를 JavaScript로 전달
        var markerData = <?php echo json_encode($marker_data, JSON_UNESCAPED_UNICODE); ?>;
        
        // 오버레이 닫기 함수
        function closeOverlay(index) {
            if (overlays[index]) {
                overlays[index].setMap(null);
            }
        }
        
        // 마커 클릭 핸들러 함수
        function createMarkerClickHandler(markerIndex) {
            return function() {
                // 다른 오버레이들 닫기
                overlays.forEach(function(ov) {
                    ov.setMap(null);
                });
                // 현재 오버레이 표시
                overlays[markerIndex].setMap(map);
            };
        }
        
        // 마커 생성 함수
        function createMarkers() {
            markerData.forEach(function(data, index) {
                // 마커 이미지 설정
                var imageSrc = '<?php echo $board_skin_url ?>/img/' + data.image;
                var imageSize = new kakao.maps.Size(24, 35);
                var imageOption = { offset: new kakao.maps.Point(12, 35) };
                
                // 마커 이미지 생성
                var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);
                var markerPosition = new kakao.maps.LatLng(data.lat, data.lng);
                
                // 마커 생성
                var marker = new kakao.maps.Marker({
                    position: markerPosition,
                    image: markerImage,
                    clickable: true
                });
                
                // 마커를 지도에 표시
                marker.setMap(map);
                
                // 커스텀 오버레이 컨텐츠 생성
                var content = '<div class="wrap">' +
                    '<div class="info">' +
                        '<div class="body">' +
                            '<div class="desc" style="margin-left:10px;">' +
                                '<img src="<?php echo $board_skin_url ?>/img/close_black_24dp.svg" class="close" onclick="closeOverlay(' + index + ')" title="닫기">' +
                                '<div class="titles cut80"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $bo_table ?>&wr_id=' + data.id + '">' + data.subject + '</a></div>' +
                                '<div class="sub1 cut90">' + data.addr1 + ' ' + data.addr2 + '</div>';
                
                if (data.phone) {
                    content += '<div class="sub3 cut90"><a href="tel:' + data.phone + '">' + data.phone + '</a></div>';
                } else if (data.link) {
                    content += '<div class="sub2 cut90"><a href="' + data.link + '" target="_blank">' + data.link + '</a></div>';
                }
                
                content += '</div></div></div></div>';
                
                // 커스텀 오버레이 생성
                var overlay = new kakao.maps.CustomOverlay({
                    content: content,
                    map: null,
                    position: markerPosition,
                    yAnchor: 1
                });
                
                // 배열에 저장
                markers.push(marker);
                overlays.push(overlay);
                
                // 마커 클릭 이벤트 등록
                kakao.maps.event.addListener(marker, 'click', createMarkerClickHandler(index));
            });
        }
        
        // 마커 생성 실행
        createMarkers();
        
    </script>
</div>
답변을 작성하시기 전에 로그인 해주세요.
전체 129,119 | RSS
QA 내용 검색

회원로그인

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