diff --git a/src/components/map/naver/draw/ControlDraw.js b/src/components/map/naver/draw/ControlDraw.js
index 04b1a61c..864e0164 100644
--- a/src/components/map/naver/draw/ControlDraw.js
+++ b/src/components/map/naver/draw/ControlDraw.js
@@ -1,82 +1,98 @@
import $ from 'jquery';
import { useState, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
export default function ControlDraw(props) {
const mapControl = useSelector(state => state.controlMapReducer);
const naver = props.naver;
const map = props.map;
- let mode;
- const [mapClickEvent, setMapClickEvent] = useState();
const [circleArr, setCircleArr] = useState([]);
+ const [markerArr, setMarkerArr] = useState([]);
- const [up, setUp] = useState(false);
+ const [upCircle, setUpCircle] = useState(false);
useEffect(() => {
- if (up) {
+ if (upCircle) {
const delay = 100;
const timer = setTimeout(() => {
- createMapClick();
- setUp(false);
+ resumeMapClick();
+ setUpCircle(false);
+
+ const index = circleArr.findIndex(
+ prev => prev.center === upCircle.getCenter()
+ );
+
+ markerArr.map((prev, idx) => {
+ if (idx === index) {
+ const text = fromMetersToText(upCircle.getRadius());
+ const content =
+ '
' +
+ text +
+ '
';
+ prev.setIcon({
+ ...prev.getIcon(),
+ content: content
+ });
+ }
+ });
}, delay);
return () => {
clearTimeout(timer);
};
}
- }, [up]);
+ }, [upCircle]);
+
+ useEffect(() => {
+ naver.maps.Event.addListener(map, 'click', onClickCircle);
+ stopMapClick();
+ }, []);
useEffect(() => {
drawInit();
}, [mapControl.ctrlDrawType]);
const drawInit = () => {
- removeMapClick();
if (mapControl.ctrlDrawType === 'CIRCLE') {
onClickButton('CIRCLE');
} else if (mapControl.ctrlDrawType === 'RESET') {
- onClickReset();
+ clearMode();
}
};
const onClickButton = newMode => {
- removeMapClick();
- if (mode === newMode) {
- mode = null;
- return;
- }
+ clearMode();
+ startMode(newMode);
+ };
+
+ const clearMode = () => {
+ if (circleArr.length != 0) {
+ circleArr.map(obj => obj.circle.setMap(null));
+ setCircleArr([]);
- // startMode(newMode);
- if (!newMode) return;
+ markerArr.map(marker => marker.setMap(null));
+ setMarkerArr([]);
- createMapClick();
+ stopMapClick();
+ }
};
- const onClickReset = () => {
- console.log('초기화 진행');
- circleArr.map(circle => circle.setMap(null));
- setCircleArr([]);
+ const startMode = mode => {
+ if (!mode) return;
- removeMapClick();
+ if (mode === 'CIRCLE') {
+ resumeMapClick();
+ }
};
- const removeMapClick = () => {
- $(document).off('mousemove.measure');
- $(document).off('mouseup.measure');
-
- // naver.maps.Event.clearInstanceListeners(map);
- naver.maps.Event.removeListener(mapClickEvent);
- setMapClickEvent();
+ const stopMapClick = () => {
+ naver.maps.Event.stopDispatch(map, 'click');
};
- const createMapClick = () => {
- setMapClickEvent(
- naver.maps.Event.addListener(map, 'click', function (e) {
- onClickCircle(e);
- })
- );
+ const resumeMapClick = () => {
+ naver.maps.Event.resumeDispatch(map, 'click');
};
const onClickCircle = e => {
@@ -92,12 +108,16 @@ export default function ControlDraw(props) {
map: map,
clickable: true
});
- setCircleArr(prev => [...prev, circle]);
+ setCircleArr(prev => [
+ ...prev,
+ { center: coord, circle: circle, radius: 100 }
+ ]);
naver.maps.Event.addListener(circle, 'mousedown', function () {
onMouseDown(circle);
});
- setUp(false);
+
+ addMileStone(coord, fromMetersToText(100));
};
const onMouseDown = circle => {
@@ -115,8 +135,8 @@ export default function ControlDraw(props) {
onMouseMove(e, circle);
});
- $(document).on('mouseup.measure', function (e) {
- onMouseUp();
+ $(document).on('mouseup.measure', function () {
+ onMouseUp(circle);
});
};
@@ -132,7 +152,7 @@ export default function ControlDraw(props) {
circle.setRadius(r);
};
- const onMouseUp = () => {
+ const onMouseUp = circle => {
map.setOptions({
draggable: true,
pinchZoom: true,
@@ -143,8 +163,38 @@ export default function ControlDraw(props) {
disableTwoFingerTapZoom: false
});
- removeMapClick();
- setUp(true);
+ $(document).off('mousemove.measure');
+ $(document).off('mouseup.measure');
+
+ stopMapClick();
+ setUpCircle(circle);
+ };
+
+ const addMileStone = (coord, text) => {
+ const content =
+ '' +
+ text +
+ '
';
+
+ const midPoint = coord;
+
+ const anchor = new naver.maps.Point(20, 35);
+
+ const marker = new naver.maps.Marker({
+ position: midPoint,
+ icon: {
+ content: content,
+ anchor: anchor
+ }
+ });
+ marker.setMap(map);
+ setMarkerArr(prev => [...prev, marker]);
+ };
+
+ const fromMetersToText = meters => {
+ meters = meters || 0;
+ const text = parseFloat(meters.toFixed(1)) + 'm';
+ return text;
};
return null;