카카오 지도API 연동 게시판 모바일용 (마커클러스터러적용) mapV2.2

카카오 지도api 연동 게시판 PC버전에 이어 모바일(mobile)용으로 제작하게 되어서 공유 해봅니다.

많은 분들이 모바일용에 관해서 문의를 주셔서 틈틈히 시간을 내어서 제작하게 되었습니다.

아직은 미흡한 부분이 있을 수 있습니다.

PC, 모바일기기, 태블릿 환경에서 테스트 완료되었습니다. (반응형 아닙니다.)

수정된 부분

view.skin.php

1. PC버전에 있는 지도보기와 로드뷰 부분은 삭제하였습니다.

기능상 특별히 필요성이 없다고 판단하여 삭제조치함. (필요하신 분들은 PC버전의 내용을 참고하여 적용하시면 됩니다.)

2. 코멘트 부분 삭제 조치함.

3. 스킨의 레이아웃 부분은 모바일용에 맞게 재수정 함.

적용방법

1. 파일을 다운받아 압축해제

2. wm_include 폴더 root에 적용 (단, PC버전을 설치하신 분은 적용하지 않으셔도 됩니다.)

3. skin 폴더는 skin폴더에 적용 (/mobile/skin 폴더에 적용하시면 됩니다.)

수정해야 할 파일

wm_include 폴더에 있는 파일 수정

map.ajax.php

$sql = " select * from g5_write_mapv2 order by wr_id asc ";
// g5_write_mapv2 (본인의 게시판명으로 수정)

wr_id.ajax.php

$bo_table ="mapv2";
// 본인의 게시판명으로 수정

테스트환경

php 7.2 / 7.4

mysql 5.7 ~ 8.0

그누보드 5.4 ~ 5.5.8.2.8

***************************

여러개의 게시판에서 사용하는 방법은 다음과 같이 하시면 됩니다.

map.ajax.php 파일 수정

<?php
header("Content-Type: application/json");
include_once './_common.php';

// 'bo_table' 매개변수로 게시판 이름이 전달되는지 확인합니다.
if (!isset($_POST['bo_table']) || empty($_POST['bo_table'])) {
    echo json_encode(array("error" => "Invalid board name"));
    exit;
}

$bo_table = $_POST['bo_table']; // 게시판 이름을 매개변수로 받아옵니다.

$sql = "SELECT * FROM g5_write_".$bo_table." ORDER BY wr_id ASC";
$result = sql_query($sql);

$position = array();
while ($row = sql_fetch_array($result)) {
    $lat = $row['wr_5'];
    $lng = $row['wr_6'];
    $wr_id = $row['wr_id'];
    $item = array("lat" => $lat, "lng" => $lng, "wr_id" => $wr_id);
    array_push($position, $item);
}

$board = array();
$board['positions'] = $position;

// 숫자로 표기되는 부분은 숫자 그대로 출력하도록 옵션 설정
echo json_encode($board, JSON_NUMERIC_CHECK);
?>


wr_id.ajax.php 파일 수정

<?php
include_once './_common.php';
include_once(G5_LIB_PATH.'/thumbnail.lib.php');

// 'bo_tables' 매개변수로 여러 개의 게시판 이름이 배열 형태로 전달됩니다.
if (!isset($_POST['bo_tables']) || empty($_POST['bo_tables'])) {
    echo "게시판 이름이 제공되지 않았습니다";
    exit;
}

$wr_id = $_POST['wr_id'];
$bo_tables = $_POST['bo_tables']; // 여러 개의 게시판 이름이 배열 형태로 전달됩니다.

// 각 게시판에 대한 데이터를 가져옵니다.
$results = array();
foreach ($bo_tables as $bo_table) {
    $sql = " SELECT * FROM g5_write_".$bo_table." WHERE wr_id = '$wr_id' ";
    $row = sql_fetch($sql);
    $thumb = get_list_thumbnail($bo_table, $row['wr_id'], 75, 73, false, true);
   
    // 각 게시판의 데이터를 결과 배열에 추가합니다.
    $result = array(
        'bo_table' => $bo_table,
        'subject' => $row['wr_subject'],
        'thumbnail_src' => $thumb['src'],
        'desc' => $row['wr_3'],
        'jibun' => $row['wr_4'],
        'link' => $row['wr_link1']
    );
    $results[] = $result;
}

// JSON 형태로 결과를 출력합니다.
header('Content-Type: application/json');
echo json_encode($results);
exit;
?>


list.skin.php 파일에서 ajax 호출할때 다음과 같이 하시면 됩니다.

[code]
<script>
  const wr_id = <?php echo $list[$i]['wr_id] ?>;
  const boardName = 'aaa'; // 특정 게시판명
  const ajaxUrl = 'wr_id.ajax.php';

  // AJAX 호출
  $.ajax({
    type: 'POST',
    url: g5_url+"/wm_include/main_map/wr_id.ajax.php",
    data: {
      wr_id: wr_id,
      bo_table: boardName // 게시판 이름을 매개변수로 전달합니다.
    },
    success: function (data) {
      // AJAX 호출에서 반환된 데이터를 처리합니다.
      // 예를 들어 데이터로 웹페이지의 특정 부분을 업데이트할 수 있습니다.
    },
    error: function (xhr, status, error) {
      // 오류 처리를 수행합니다.
    }
  });
</script>