237 lines
11 KiB
PHP
237 lines
11 KiB
PHP
<?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>
|