페이지 추가
Some checks failed
Close Pull Request / main (pull_request_target) Has been cancelled

This commit is contained in:
yangsh
2026-01-16 14:43:11 +09:00
parent ed39194225
commit 8bea5766a3
14 changed files with 7309 additions and 14 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,237 @@
<?php
$cnt = count($listDept);
$lati = 0;
$long = 0;
foreach ($listDept as $dept) {
$lati += $dept['rcpt_y'];
$long += $dept['rcpt_x'];
}
$lati = $lati / $cnt;
$long = $long / $cnt;
?>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Language" content="ko">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>지도보기</title>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
<meta name="description" content="ArchitectUI HTML Bootstrap 5 Dashboard Template">
<script defer src="/architectui/assets/scripts/vendors.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/main.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/demo.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/ladda.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/blockui.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/circle_progress.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/count_up.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/toastr.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/sweet_alerts.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/scrollbar.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/sticky_elements.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/carousel_slider.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/fullcalendar.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/treeview.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/maps.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/rating.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/image_crop.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/guided_tours.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/tables.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/form_validation.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/form_wizard.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/clipboard.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/datepicker.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/input_mask.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/input_select.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/range_slider.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/textarea_autosize.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/toggle_switch.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/chart_js.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/apex_charts.98288b227c064e6a107f.js"></script>
<script defer src="/architectui/assets/scripts/sparklines.98288b227c064e6a107f.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link href="/architectui/assets/styles/vendors.98288b227c064e6a107f.css" rel="stylesheet">
<link href="/architectui/assets/styles/main.98288b227c064e6a107f.css" rel="stylesheet">
<style>
.marker-label {
position: absolute;
transform: translate(-50%, -100%);
background: #fff;
border: 1px solid #333;
border-radius: 6px;
padding: 3px 6px;
font-size: 12px;
white-space: nowrap;
box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
pointer-events: none;
/* 지도 드래그 방해 안 하게 */
}
</style>
</head>
<body>
<div class="my-loader-template d-none">
<div class="loader bg-transparent no-shadow p-0">
<div class="ball-grid-pulse">
<div class="bg-white"></div>
<div class="bg-white"></div>
<div class="bg-white"></div>
<div class="bg-white"></div>
<div class="bg-white"></div>
<div class="bg-white"></div>
<div class="bg-white"></div>
<div class="bg-white"></div>
<div class="bg-white"></div>
</div>
</div>
</div>
<div class="app-container app-theme-white body-tabs-shadow">
<div class="app-container">
<div class="app-main__outer">
<div class="app-main__inner px-4 py-3">
<div class="app-page-title">
<div class="page-title-wrapper d-flex align-items-center">
<div class="page-title-heading">
<div class="page-title-icon">
<i class="pe-7s-map icon-gradient bg-premium-dark"></i>
</div>
<div>
관할 배정 지도
</div>
</div>
<div class="ms-auto">
<button type="button" class="btn btn-primary" onclick="fn_print();">
인쇄하기
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="main-card mb-3 card" id="mapArea">
<div class="card-body" style="height: 400px;">
<div id="map_view" style="width:100%;height:700px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=kvyjyj00fp"></script> -->
<!-- <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=dtounkwjc5"></script> -->
<!-- <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=dtounkwjc5"></script> -->
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=dtounkwjc5"></script>
<script type="text/javascript">
const tpl = document.querySelector('.my-loader-template');
var map;
$(function () {
map = new naver.maps.Map('map_view', {
center: new naver.maps.LatLng(<?= $lati ?>, <?= $long ?>), //지도의 초기 중심 좌표
useStyleMap: true,
zoom: 15, //지도의 초기 줌 레벨
minZoom: 1, //지도의 최소 줌 레벨
mapTypeControl: true, //지도 유형 컨트롤의 표시 여부
mapTypeControlOptions: { //지도 유형 컨트롤의 옵션
style: naver.maps.MapTypeControlStyle.BUTTON,
position: naver.maps.Position.TOP_LEFT
},
zoomControl: true, //줌 컨트롤의 표시 여부
zoomControlOptions: { //줌 컨트롤의 옵션
position: naver.maps.Position.TOP_RIGHT
}
});
<?php reset($listDept);
foreach ($listDept as $dept): ?>
const pos_<?= $dept['dept_sq'] ?> = new naver.maps.LatLng(<?= $dept['rcpt_y'] ?>, <?= $dept['rcpt_x'] ?>);
// 기본 마커
new naver.maps.Marker({
position: pos_<?= $dept['dept_sq'] ?>,
map: map,
// icon: {
// url: HOME_PATH + '/plugin/img/pin.png',
// size: new naver.maps.Size(50, 52),
// origin: new naver.maps.Point(0, 0),
// anchor: new naver.maps.Point(25, 26)
// }
});
// 라벨 오버레이(텍스트만)
new LabelOverlay({
position: pos_<?= $dept['dept_sq'] ?>,
text: '<?= $dept['rcpt_atclno'] ?> <?= $dept['rsrv_date'] ?> <?= $dept['rsrv_tm_ap'] ?> <?= $dept['rsrv_tm_hour'] ?>시',
map: map
});
<?php endforeach; ?>
});
function LabelOverlay(options) {
this._position = options.position;
this._text = options.text;
this._map = options.map;
this.setMap(this._map);
}
LabelOverlay.prototype = new naver.maps.OverlayView();
LabelOverlay.prototype.onAdd = function () {
const el = document.createElement('div');
el.className = 'marker-label';
el.textContent = this._text;
this._el = el;
const overlayLayer = this.getPanes().overlayLayer;
overlayLayer.appendChild(el);
};
LabelOverlay.prototype.draw = function () {
const projection = this.getProjection();
const point = projection.fromCoordToOffset(this._position);
// 라벨을 마커 위로 올리기
this._el.style.left = point.x + 'px';
this._el.style.top = (point.y - 30) + 'px';
};
LabelOverlay.prototype.onRemove = function () {
if (this._el && this._el.parentNode) this._el.parentNode.removeChild(this._el);
this._el = null;
};
// 인쇄하기
function fn_print() {
var initBody;
window.onbeforeprint = function () {
initBody = document.body.innerHTML;
document.body.innerHTML = document.getElementById('mapArea').innerHTML;
};
window.onafterprint = function () {
document.body.innerHTML = initBody;
};
window.print();
return false;
}
</script>
</body>
</html>