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

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

QA

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

답변 3

그누보드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>
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 62,873
© SIRSOFT
현재 페이지 제일 처음으로