diff --git a/src/components/map/naver/dron/DronMarker.js b/src/components/map/naver/dron/DronMarker.js index f576757..68ce39d 100644 --- a/src/components/map/naver/dron/DronMarker.js +++ b/src/components/map/naver/dron/DronMarker.js @@ -30,6 +30,10 @@ export const DronMarker = props => { content: contentString }); + useEffect(() => { + if(arrMarkers.length != 0) markerInfo(arrMarkers) + }, [arrMarkers]) + useEffect(() => { markerInit(); @@ -91,7 +95,7 @@ export const DronMarker = props => { //마커를 그린다. const addMarkers = (position, id, controlId) => { - var marker = new naver.maps.Marker({ + let marker = new naver.maps.Marker({ position: position, title: id, id: id, @@ -111,13 +115,13 @@ export const DronMarker = props => { marker.setMap(props.map); // drone 정보 창 - markerInfo(marker); - + naver.maps.Event.addListener(marker, 'click', function (e) { - handlerDronClick(marker); + handlerDronClick(marker); }); - + setArrMarkers(m => [...m, marker]); + // markerInfo(marker, position, id); }; const handlerDronClick = marker => { @@ -175,7 +179,7 @@ export const DronMarker = props => { if (arrInfos && controlGpList) { arrInfos.map(info => { const isExists = controlGpList.find( - item => item.objectId === window.id + item => item.objectId === info.id ); if (!isExists) { removeInfos(info); @@ -192,7 +196,7 @@ export const DronMarker = props => { const markerInit = () => { if (controlGpList) { allRemoveMarkers(); - allRemoveInfos(); + // allRemoveInfos(); controlGpList.map(item => { const position = new naver.maps.LatLng(item.lat, item.lng); @@ -202,7 +206,7 @@ export const DronMarker = props => { ); if (isExists) { moveMarkers(isExists, position); - moveInfos(isExists, position); + // moveInfos(isExists, position); } else { addMarkers(position, item.objectId, item.controlId); } @@ -213,7 +217,7 @@ export const DronMarker = props => { } }; - //운항정보 창 셋팅 + // //운항정보 창 셋팅 const infoInit = (marker, gps) => { CustomOverlay = function(options) { this._element = $(` @@ -239,6 +243,7 @@ export const DronMarker = props => { this.setPosition(options.position); this.setMap(options.map || null); + this.setId(options.id); }; CustomOverlay.prototype = new naver.maps.OverlayView(); @@ -282,6 +287,14 @@ export const DronMarker = props => { CustomOverlay.prototype.getPosition = function() { return this._position; }; + + CustomOverlay.prototype.setId = function(id) { + this._id = id; + }; + + CustomOverlay.prototype.getId = function(id) { + return this._id; + }; } const removeArrMarkers = arrData => { @@ -292,31 +305,9 @@ export const DronMarker = props => { setArrInfos(arrData); }; - const markerInfo = (marker) => { - console.log('ddd') - // controlGpList.forEach(gps => { - - // // const contents = ` - // //
- // //
- // // ${marker.id} - // //
- // //
- // //
- // // 속도: ${gps.speed}${gps.speedType} - // //
- // //
- // // 고도: ${gps.elev}${gps.elevType} - // //
- // //
- // // 헤딩방향: ${gps.heading} - // //
- // //
- // //
- // // - // // `; - + // const markerInfo = (marker, position, id) => { + const markerInfo = (arrMarkers) => { + // controlGpList.forEach(gps => // // var info = new naver.maps.InfoWindow({ // // id: marker.id, @@ -331,22 +322,19 @@ export const DronMarker = props => { // // 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 + arrMarkers.forEach((marker, idx) => { + infoInit(marker, controlGpList[idx]); + if(controlGpList.length != 0) { + const info = new CustomOverlay({ + position: new naver.maps.LatLng(controlGpList[idx].lat, controlGpList[idx].lng), + map: map, + id: marker.id + }); + console.log(info) + setArrInfos(m => [...m, info]); + } }); - - console.log(marker.position, 'marker') - console.log(overlay._position, 'over') }