diff --git a/src/components/map/naver/dron/DronMarker.js b/src/components/map/naver/dron/DronMarker.js
index 3bd155c..ab518af 100644
--- a/src/components/map/naver/dron/DronMarker.js
+++ b/src/components/map/naver/dron/DronMarker.js
@@ -1,3 +1,4 @@
+import $ from 'jquery';
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import '../../../../assets/css/custom.css';
@@ -17,7 +18,12 @@ export const DronMarker = props => {
const [arrMarkers, setArrMarkers] = useState([]);
+ const [arrInfos, setArrInfos] = useState([]);
+
let naver = props.naver;
+ let map = props.map;
+
+ let CustomOverlay;
var contentString = ['
dddd', '
'].join('');
var infowindow = new naver.maps.InfoWindow({
@@ -106,7 +112,7 @@ export const DronMarker = props => {
marker.setMap(props.map);
// drone 정보 창
- markerInfoWindow(marker);
+ markerInfo(marker);
naver.maps.Event.addListener(marker, 'click', function (e) {
handlerDronClick(marker);
@@ -133,11 +139,19 @@ export const DronMarker = props => {
marker.setMap(null);
};
+ const removeInfos = info => {
+ info.setMap(null);
+ }
+
//마커에 위치를 이동한다.
const moveMarkers = (marker, position) => {
marker.setPosition(position);
};
+ const moveInfos = (info, position) => {
+ info.setPosition(position);
+ };
+
//데이터가 없는 마커를 모두 삭제 한다.
const allRemoveMarkers = () => {
if (arrMarkers && controlGpList) {
@@ -158,10 +172,28 @@ export const DronMarker = props => {
}
};
+ const allRemoveInfos = () => {
+ if (arrInfos && controlGpList) {
+ arrInfos.map(info => {
+ const isExists = controlGpList.find(
+ item => item.objectId === window.id
+ );
+ if (!isExists) {
+ removeInfos(info);
+ const arrData = arrInfos.filter(
+ item => item.id != info.id
+ );
+ removeArrInfos(arrData);
+ }
+ })
+ }
+ }
+
//마커를 셋팅 한다.
const markerInit = () => {
if (controlGpList) {
allRemoveMarkers();
+ allRemoveInfos();
controlGpList.map(item => {
const position = new naver.maps.LatLng(item.lat, item.lng);
@@ -171,6 +203,7 @@ export const DronMarker = props => {
);
if (isExists) {
moveMarkers(isExists, position);
+ moveInfos(isExists, position);
} else {
addMarkers(position, item.objectId, item.controlId);
}
@@ -181,47 +214,142 @@ export const DronMarker = props => {
}
};
+ //운항정보 창 셋팅
+ const infoInit = (marker, gps) => {
+ CustomOverlay = function(options) {
+ this._element = $(`
+
+
+ `)
+
+ this.setPosition(options.position);
+ this.setMap(options.map || null);
+ };
+
+ CustomOverlay.prototype = new naver.maps.OverlayView();
+ CustomOverlay.prototype.constructor = CustomOverlay;
+
+ //메소드 재정의
+
+ //필수
+ CustomOverlay.prototype.onAdd = function() {
+ var overlayLayer = this.getPanes().overlayLayer;
+
+ this._element.appendTo(overlayLayer);
+ };
+
+ CustomOverlay.prototype.draw = function() {
+ if (!this.getMap()) {
+ return;
+ }
+
+ var projection = this.getProjection(),
+ position = this.getPosition(),
+ pixelPosition = projection.fromCoordToOffset(position);
+
+ this._element.css('left', pixelPosition.x);
+ this._element.css('top', pixelPosition.y);
+ };
+
+ CustomOverlay.prototype.onRemove = function() {
+ var overlayLayer = this.getPanes().overlayLayer;
+
+ this._element.remove();
+ this._element.off();
+ };
+
+ //속성
+ CustomOverlay.prototype.setPosition = function(position) {
+ this._position = position;
+ this.draw();
+ };
+
+ CustomOverlay.prototype.getPosition = function() {
+ return this._position;
+ };
+ }
+
const removeArrMarkers = arrData => {
setArrMarkers(arrData);
};
- const markerInfoWindow = (marker) => {
- controlGpList.forEach(gps => {
-
- const contents = [
- ``
- ].join('');
-
- const info = new naver.maps.InfoWindow({
- id: marker.id,
- content: contents,
- backgroundColor: '#283046', //박스안쪽영역 컬러
- anchorSize: new props.naver.maps.Size(30, -10),
- anchorSkew: false,
- anchorColor: '#283046',
- pixelOffset: new props.naver.maps.Point(20, -20)
- });
-
- console.log(info);
+ const removeArrInfos = arrData => {
+ setArrInfos(arrData);
+ };
- info.open(props.map, marker);
- });
+ const markerInfo = (marker) => {
+ console.log('ddd')
+ // controlGpList.forEach(gps => {
+
+ // // const contents = `
+ // //
+ // //
+ // // `;
+
+
+ // // var info = new naver.maps.InfoWindow({
+ // // id: marker.id,
+ // // content: contents,
+ // // backgroundColor: '#283046', //박스안쪽영역 컬러
+ // // anchorSize: new props.naver.maps.Size(30, -10),
+ // // anchorSkew: false,
+ // // anchorColor: '#283046',
+ // // pixelOffset: new props.naver.maps.Point(20, -20)
+ // // });
+ // // info.open(props.map, marker);
+
+ // // setArrWindows(m => [...m, info]);
+
+ // infoInit(marker, gps);
+
+ // var overlay = new CustomOverlay({
+ // position: marker.position,
+ // map: map
+ // });
+ // });
+
+ infoInit(marker, controlGpList[0])
+ var overlay = new CustomOverlay({
+ position: marker.position,
+ map: map
+ });
+
+ console.log(marker.position, 'marker')
+ console.log(overlay._position, 'over')
}
+
return null;
};