|
|
@@ -1,6 +1,7 @@
|
|
|
let _size = [48, 48, 48, 48, 40, 32, 24, 22, 20, 18, 18];
|
|
|
let _AtrdMap = new Map();
|
|
|
let selectIncidentId = null;
|
|
|
+let _MarkerArr = [];
|
|
|
|
|
|
const vmsWHMap = new Map();
|
|
|
vmsWHMap.set('VMC1', {width: 400, height: 64});
|
|
|
@@ -146,7 +147,7 @@ $(()=>{
|
|
|
});
|
|
|
|
|
|
|
|
|
- let _MarkerArr = [];
|
|
|
+
|
|
|
$('.tab-title > div').on('click', function(){
|
|
|
const $spot = $('.list-content.spot');
|
|
|
const $list = $('.list-content.list');
|
|
|
@@ -180,10 +181,10 @@ $(()=>{
|
|
|
|
|
|
|
|
|
$('#search-box').on('keyup', function () {
|
|
|
- const searchType = $('.tab-title > div.active').text();
|
|
|
+ // const searchType = $('.tab-title > div.active').text();
|
|
|
const searchText = $(this).val();
|
|
|
|
|
|
- if (searchType === '리스트') {
|
|
|
+ // if (searchType === '리스트') {
|
|
|
const $list = $('.list-content.list > li');
|
|
|
if (!$list.length) return;
|
|
|
const $activeTab = $('.list-tab .active');
|
|
|
@@ -223,92 +224,263 @@ $(()=>{
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- else {
|
|
|
- if (_MarkerArr.length > 0) {
|
|
|
- _MarkerArr.forEach((obj)=>{
|
|
|
- obj.setMap(null);
|
|
|
- });
|
|
|
- _MarkerArr = [];
|
|
|
+ // }
|
|
|
+ // else {
|
|
|
+ // if (_MarkerArr.length > 0) {
|
|
|
+ // _MarkerArr.forEach((obj)=>{
|
|
|
+ // obj.setMap(null);
|
|
|
+ // });
|
|
|
+ // _MarkerArr = [];
|
|
|
+ // }
|
|
|
+ // $('.list-content.spot').html("");
|
|
|
+ // if (!searchText || !searchText.trim()) return;
|
|
|
+ // $.ajax({
|
|
|
+ // url: 'https://dapi.kakao.com/v2/local/search/address.json',
|
|
|
+ // headers: { 'Authorization': 'KakaoAK 4896b94398b96949d349881d004835cf'},
|
|
|
+ // data :{
|
|
|
+ // query : searchText,
|
|
|
+ // },
|
|
|
+ // type: 'GET'
|
|
|
+ // }).done(function(data) {
|
|
|
+ // if (data && data.documents.length > 0) {
|
|
|
+ // let str = "";
|
|
|
+ // const setMap = new Map();
|
|
|
+ //
|
|
|
+ // const bounds = new kakao.maps.LatLngBounds();
|
|
|
+ // let minX;
|
|
|
+ // let minY;
|
|
|
+ // let maxX;
|
|
|
+ // let maxY;
|
|
|
+ // let idx = 0;
|
|
|
+ // data.documents.forEach((obj)=>{
|
|
|
+ // if (!setMap.get(obj.address_name) && obj.address_name.includes("경북 포항시")) {
|
|
|
+ // idx++;
|
|
|
+ // let addr = obj.address_name;
|
|
|
+ // if (obj.x && obj.y) {
|
|
|
+ // const position = getKakaoPosition(obj.y, obj.x);
|
|
|
+ // let marker = new kakao.maps.Marker({
|
|
|
+ // position : position,
|
|
|
+ // title : addr ,
|
|
|
+ // content : addr
|
|
|
+ // });
|
|
|
+ //
|
|
|
+ // new kakao.maps.event.addListener(marker, 'click', function() {
|
|
|
+ // moveLocation(obj.x, obj.y, idx);
|
|
|
+ // })
|
|
|
+ // if (!minX) {
|
|
|
+ // minX = obj.x;
|
|
|
+ // }
|
|
|
+ //
|
|
|
+ // if (!maxX) {
|
|
|
+ // maxX = obj.x;
|
|
|
+ // }
|
|
|
+ // if (!minY) {
|
|
|
+ // minY = obj.y;
|
|
|
+ // }
|
|
|
+ //
|
|
|
+ // if (!maxY) {
|
|
|
+ // maxY = obj.y;
|
|
|
+ // }
|
|
|
+ //
|
|
|
+ // minX = minX <= obj.x ? minX : obj.x;
|
|
|
+ // maxX = maxX >= obj.x ? maxX : obj.x;
|
|
|
+ // minY = minY <= obj.y ? minY : obj.y;
|
|
|
+ // maxY = maxY >= obj.y ? maxY : obj.y;
|
|
|
+ //
|
|
|
+ // marker.setMap(_MapHandler.map);
|
|
|
+ // _MarkerArr.push(marker);
|
|
|
+ // setMap.set(addr, obj);
|
|
|
+ //
|
|
|
+ // str+= `<li id="spot-${idx}" onclick="moveLocation(${obj.x}, ${obj.y}, ${idx})">
|
|
|
+ // ${obj.address_name}
|
|
|
+ // </li>`;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ //
|
|
|
+ // if (minX && minY && maxX && maxY) {
|
|
|
+ // bounds.extend(new kakao.maps.LatLng(minY, minX));
|
|
|
+ // bounds.extend(new kakao.maps.LatLng(maxY, maxX));
|
|
|
+ // _MapHandler.setBounds(bounds);
|
|
|
+ // $('.list-content.spot').html(str);
|
|
|
+ // getVertex();
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ })
|
|
|
+});
|
|
|
+
|
|
|
+function searchLocation(event) {
|
|
|
+ if (event && event.key !== 'Enter') {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ $('.list-content.spot').empty();
|
|
|
+ const $search = $('.location-box input');
|
|
|
+ if (_MarkerArr.length > 0) {
|
|
|
+ _MarkerArr.forEach((obj)=>{
|
|
|
+ obj.setMap(null);
|
|
|
+ });
|
|
|
+ _MarkerArr = [];
|
|
|
+ }
|
|
|
+ const searchText = $search.val();
|
|
|
+ if (!searchText || !searchText.trim()) return;
|
|
|
+ // const addressData = await $.ajax({
|
|
|
+ // url: 'https://dapi.kakao.com/v2/local/search/address.json',
|
|
|
+ // headers: { 'Authorization': 'KakaoAK 4896b94398b96949d349881d004835cf'},
|
|
|
+ // data :{
|
|
|
+ // query : searchText,
|
|
|
+ // },
|
|
|
+ // type: 'GET'
|
|
|
+ // });
|
|
|
+ //
|
|
|
+ // const roadAddressData = await $.ajax({
|
|
|
+ // url: 'https://dapi.kakao.com/v2/local/search/road_address.json',
|
|
|
+ // headers: { 'Authorization': 'KakaoAK 4896b94398b96949d349881d004835cf'},
|
|
|
+ // data :{
|
|
|
+ // query : searchText,
|
|
|
+ // },
|
|
|
+ // type: 'GET'
|
|
|
+ // });
|
|
|
+ // console.log(addressData);
|
|
|
+ // console.log(roadAddressData);
|
|
|
+ const geoCoder = new kakao.maps.services.Geocoder();
|
|
|
+ geoCoder.addressSearch(searchText, function(result, status){
|
|
|
+ if (status === 'OK' && result && result.length > 0) {
|
|
|
+ let str = "";
|
|
|
+ const setMap = new Map();
|
|
|
+
|
|
|
+ const bounds = new kakao.maps.LatLngBounds();
|
|
|
+ let minX;
|
|
|
+ let minY;
|
|
|
+ let maxX;
|
|
|
+ let maxY;
|
|
|
+ let idx = 0;
|
|
|
+ result.forEach((obj)=>{
|
|
|
+ if (!setMap.get(obj.address_name) && obj.address_name.includes("경북 포항시")) {
|
|
|
+ idx++;
|
|
|
+ let addr = obj.address_name;
|
|
|
+ if (obj.x && obj.y) {
|
|
|
+ const position = getKakaoPosition(obj.y, obj.x);
|
|
|
+ let marker = new kakao.maps.Marker({
|
|
|
+ position : position,
|
|
|
+ title : addr ,
|
|
|
+ content : addr
|
|
|
+ });
|
|
|
+
|
|
|
+ new kakao.maps.event.addListener(marker, 'click', function() {
|
|
|
+ moveLocation(obj.x, obj.y, idx);
|
|
|
+ })
|
|
|
+ if (!minX) {
|
|
|
+ minX = obj.x;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!maxX) {
|
|
|
+ maxX = obj.x;
|
|
|
+ }
|
|
|
+ if (!minY) {
|
|
|
+ minY = obj.y;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!maxY) {
|
|
|
+ maxY = obj.y;
|
|
|
+ }
|
|
|
+
|
|
|
+ minX = minX <= obj.x ? minX : obj.x;
|
|
|
+ maxX = maxX >= obj.x ? maxX : obj.x;
|
|
|
+ minY = minY <= obj.y ? minY : obj.y;
|
|
|
+ maxY = maxY >= obj.y ? maxY : obj.y;
|
|
|
+
|
|
|
+ marker.setMap(_MapHandler.map);
|
|
|
+ _MarkerArr.push(marker);
|
|
|
+ setMap.set(addr, obj);
|
|
|
+
|
|
|
+ str+= `<li id="spot-${idx}" onclick="moveLocation(${obj.x}, ${obj.y}, ${idx})">
|
|
|
+ ${obj.address_name}
|
|
|
+ </li>`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ if (minX && minY && maxX && maxY) {
|
|
|
+ bounds.extend(new kakao.maps.LatLng(minY, minX));
|
|
|
+ bounds.extend(new kakao.maps.LatLng(maxY, maxX));
|
|
|
+ _MapHandler.setBounds(bounds);
|
|
|
+ $('.list-content.spot').html(str);
|
|
|
+ getVertex();
|
|
|
}
|
|
|
- $('.list-content.spot').html("");
|
|
|
- if (!searchText || !searchText.trim()) return;
|
|
|
- $.ajax({
|
|
|
- url: 'https://dapi.kakao.com/v2/local/search/address.json',
|
|
|
- headers: { 'Authorization': 'KakaoAK 4896b94398b96949d349881d004835cf'},
|
|
|
- data :{
|
|
|
- query : searchText,
|
|
|
- },
|
|
|
- type: 'GET'
|
|
|
- }).done(function(data) {
|
|
|
- if (data && data.documents.length > 0) {
|
|
|
- let str = "";
|
|
|
- const setMap = new Map();
|
|
|
-
|
|
|
- const bounds = new kakao.maps.LatLngBounds();
|
|
|
- let minX;
|
|
|
- let minY;
|
|
|
- let maxX;
|
|
|
- let maxY;
|
|
|
- let idx = 0;
|
|
|
- data.documents.forEach((obj)=>{
|
|
|
- if (!setMap.get(obj.address_name) && obj.address_name.includes("경북 포항시")) {
|
|
|
- idx++;
|
|
|
- let addr = obj.address_name;
|
|
|
- if (obj.x && obj.y) {
|
|
|
- const position = getKakaoPosition(obj.y, obj.x);
|
|
|
- let marker = new kakao.maps.Marker({
|
|
|
- position : position,
|
|
|
- title : addr ,
|
|
|
- content : addr
|
|
|
- });
|
|
|
-
|
|
|
- new kakao.maps.event.addListener(marker, 'click', function() {
|
|
|
- moveLocation(obj.x, obj.y, idx);
|
|
|
- })
|
|
|
- if (!minX) {
|
|
|
- minX = obj.x;
|
|
|
- }
|
|
|
-
|
|
|
- if (!maxX) {
|
|
|
- maxX = obj.x;
|
|
|
- }
|
|
|
- if (!minY) {
|
|
|
- minY = obj.y;
|
|
|
- }
|
|
|
-
|
|
|
- if (!maxY) {
|
|
|
- maxY = obj.y;
|
|
|
- }
|
|
|
-
|
|
|
- minX = minX <= obj.x ? minX : obj.x;
|
|
|
- maxX = maxX >= obj.x ? maxX : obj.x;
|
|
|
- minY = minY <= obj.y ? minY : obj.y;
|
|
|
- maxY = maxY >= obj.y ? maxY : obj.y;
|
|
|
-
|
|
|
- marker.setMap(_MapHandler.map);
|
|
|
- _MarkerArr.push(marker);
|
|
|
- setMap.set(addr, obj);
|
|
|
-
|
|
|
- str+= `<li id="spot-${idx}" onclick="moveLocation(${obj.x}, ${obj.y}, ${idx})">
|
|
|
- ${obj.address_name}
|
|
|
- </li>`;
|
|
|
- }
|
|
|
+ }
|
|
|
+ console.log(result);
|
|
|
+ console.log(status);
|
|
|
+ }, {page : 1, size: 30});
|
|
|
+ let data;
|
|
|
+ // done(function(data) {
|
|
|
+ if (data && data.documents.length > 0) {
|
|
|
+ let str = "";
|
|
|
+ const setMap = new Map();
|
|
|
+
|
|
|
+ const bounds = new kakao.maps.LatLngBounds();
|
|
|
+ let minX;
|
|
|
+ let minY;
|
|
|
+ let maxX;
|
|
|
+ let maxY;
|
|
|
+ let idx = 0;
|
|
|
+ data.documents.forEach((obj)=>{
|
|
|
+ if (!setMap.get(obj.address_name) && obj.address_name.includes("경북 포항시")) {
|
|
|
+ idx++;
|
|
|
+ let addr = obj.address_name;
|
|
|
+ if (obj.x && obj.y) {
|
|
|
+ const position = getKakaoPosition(obj.y, obj.x);
|
|
|
+ let marker = new kakao.maps.Marker({
|
|
|
+ position : position,
|
|
|
+ title : addr ,
|
|
|
+ content : addr
|
|
|
+ });
|
|
|
+
|
|
|
+ new kakao.maps.event.addListener(marker, 'click', function() {
|
|
|
+ moveLocation(obj.x, obj.y, idx);
|
|
|
+ })
|
|
|
+ if (!minX) {
|
|
|
+ minX = obj.x;
|
|
|
}
|
|
|
- });
|
|
|
|
|
|
- if (minX && minY && maxX && maxY) {
|
|
|
- bounds.extend(new kakao.maps.LatLng(minY, minX));
|
|
|
- bounds.extend(new kakao.maps.LatLng(maxY, maxX));
|
|
|
- _MapHandler.setBounds(bounds);
|
|
|
- $('.list-content.spot').html(str);
|
|
|
- getVertex();
|
|
|
+ if (!maxX) {
|
|
|
+ maxX = obj.x;
|
|
|
+ }
|
|
|
+ if (!minY) {
|
|
|
+ minY = obj.y;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!maxY) {
|
|
|
+ maxY = obj.y;
|
|
|
+ }
|
|
|
+
|
|
|
+ minX = minX <= obj.x ? minX : obj.x;
|
|
|
+ maxX = maxX >= obj.x ? maxX : obj.x;
|
|
|
+ minY = minY <= obj.y ? minY : obj.y;
|
|
|
+ maxY = maxY >= obj.y ? maxY : obj.y;
|
|
|
+
|
|
|
+ marker.setMap(_MapHandler.map);
|
|
|
+ _MarkerArr.push(marker);
|
|
|
+ setMap.set(addr, obj);
|
|
|
+
|
|
|
+ str+= `<li id="spot-${idx}" onclick="moveLocation(${obj.x}, ${obj.y}, ${idx})">
|
|
|
+ ${obj.address_name}
|
|
|
+ </li>`;
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
+
|
|
|
+ if (minX && minY && maxX && maxY) {
|
|
|
+ bounds.extend(new kakao.maps.LatLng(minY, minX));
|
|
|
+ bounds.extend(new kakao.maps.LatLng(maxY, maxX));
|
|
|
+ _MapHandler.setBounds(bounds);
|
|
|
+ $('.list-content.spot').html(str);
|
|
|
+ getVertex();
|
|
|
+ }
|
|
|
}
|
|
|
- })
|
|
|
-});
|
|
|
+ // });
|
|
|
+}
|
|
|
|
|
|
/**
|
|
|
* 지점 클릭 위치 이동
|
|
|
@@ -581,6 +753,11 @@ function atrdClickEvent(AupHillId, AdownHillId) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+/**
|
|
|
+ * 간선도로 레벨 설정
|
|
|
+ * @param level 현재 레벨
|
|
|
+ * @returns {number} 데이터 레벨
|
|
|
+ */
|
|
|
function getAtrdLevel(level) {
|
|
|
if (level >= 8) {
|
|
|
level = 7;
|
|
|
@@ -591,6 +768,9 @@ function getAtrdLevel(level) {
|
|
|
return level;
|
|
|
}
|
|
|
|
|
|
+/**
|
|
|
+ * 마커 객체
|
|
|
+ */
|
|
|
class MarkerObj {
|
|
|
constructor({ID, NAME, X_CRDN, Y_CRDN, URL, TYPE, IMAGE, IMAGE_TYPE, DATA, ADDR}) {
|
|
|
this.ID = ID;
|
|
|
@@ -1336,14 +1516,22 @@ let isHide = false
|
|
|
function toggleEvent() {
|
|
|
const $listArea = $('.left-list-area');
|
|
|
const $toggleButton = $('.toggle-button');
|
|
|
+ const $locationButton = $('.location-btn');
|
|
|
+ const $locationBox = $('.location-box');
|
|
|
|
|
|
if (!isHide) {
|
|
|
$toggleButton.animate({
|
|
|
left: 0
|
|
|
}, 'slow');
|
|
|
- $listArea .animate({
|
|
|
+ $listArea.animate({
|
|
|
left: -$listArea.width()
|
|
|
}, 'slow');
|
|
|
+ $locationButton.animate({
|
|
|
+ left: 27
|
|
|
+ }, 'slow');
|
|
|
+ $locationBox.animate({
|
|
|
+ left: 27
|
|
|
+ }, 'slow');
|
|
|
$toggleButton.text('>');
|
|
|
}
|
|
|
else {
|
|
|
@@ -1353,20 +1541,32 @@ function toggleEvent() {
|
|
|
$listArea .animate({
|
|
|
left: 0
|
|
|
}, 'slow');
|
|
|
+ $locationButton.animate({
|
|
|
+ left: $listArea.width() + 27
|
|
|
+ }, 'slow')
|
|
|
+ $locationBox.animate({
|
|
|
+ left: $listArea.width() + 27
|
|
|
+ }, 'slow')
|
|
|
$toggleButton.text('<');
|
|
|
}
|
|
|
isHide = !isHide;
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+
|
|
|
window.addEventListener('resize', function(event) {
|
|
|
if ($(this).width() > 450) {
|
|
|
const $toggleButton = $('.toggle-button');
|
|
|
+ const $locationButton = $('.location-btn');
|
|
|
const $listArea = $('.left-list-area');
|
|
|
+ const $locationBox = $('.location-box');
|
|
|
const left = $toggleButton.offset().left;
|
|
|
const listLeft = $listArea.offset().left;
|
|
|
if ($(this).width() >= 920) {
|
|
|
if (left > 0 && left < 400) {
|
|
|
$toggleButton.css('left', 400);
|
|
|
+ $locationButton.css('left', 427);
|
|
|
+ $locationBox.css('left', 427);
|
|
|
}
|
|
|
|
|
|
if (listLeft > -400 && listLeft < 0) {
|
|
|
@@ -1376,6 +1576,8 @@ window.addEventListener('resize', function(event) {
|
|
|
else {
|
|
|
if (left > 0 && left > 275) {
|
|
|
$toggleButton.css('left', 275);
|
|
|
+ $locationButton.css('left', 302);
|
|
|
+ $locationBox.css('left', 302);
|
|
|
}
|
|
|
|
|
|
if (listLeft < -273) {
|
|
|
@@ -1383,6 +1585,10 @@ window.addEventListener('resize', function(event) {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ else {
|
|
|
+ $('.location-box').css('display', 'none');
|
|
|
+ $('.location-btn').removeClass('on');
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
|
|
|
@@ -1787,4 +1993,18 @@ class MarkerManager{
|
|
|
|
|
|
this.setIsDraw(type, isShow);
|
|
|
}
|
|
|
-}
|
|
|
+}
|
|
|
+
|
|
|
+function toggleLocationBox() {
|
|
|
+ const $locationBox = $('.location-box');
|
|
|
+ if (_MarkerArr.length > 0) {
|
|
|
+ _MarkerArr.forEach((obj)=>{
|
|
|
+ obj.setMap(null);
|
|
|
+ });
|
|
|
+ _MarkerArr = [];
|
|
|
+ }
|
|
|
+ $('.location-box input').val('');
|
|
|
+ $('.list-content.spot').empty();
|
|
|
+ $locationBox.toggle();
|
|
|
+ $('.location-btn').toggleClass('on');
|
|
|
+}
|
