junh_eee
2 years ago
6 changed files with 164 additions and 65 deletions
@ -0,0 +1,73 @@
|
||||
import { useEffect, useState } from "react"; |
||||
import { BiCaretLeftCircle } from "react-icons/bi"; |
||||
import { useSelector } from "react-redux"; |
||||
|
||||
export const DrawMap = props => { |
||||
const {naver} = props; |
||||
const {map} = props; |
||||
|
||||
useEffect(() => { |
||||
drawSetting(); |
||||
// debugger;
|
||||
console.log("draw create") |
||||
}, []); |
||||
|
||||
const drawSetting = () => { |
||||
// debugger;
|
||||
console.log(map) |
||||
|
||||
const drawingManager = new naver.maps.drawing.DrawingManager({ |
||||
drawingControl: [ |
||||
naver.maps.drawing.DrawingMode.POLYLINE, |
||||
naver.maps.drawing.DrawingMode.POLYGON, |
||||
naver.maps.drawing.DrawingMode.ELLIPSE, |
||||
naver.maps.drawing.DrawingMode.RECTANGLE |
||||
], |
||||
drawingControlOptions: { |
||||
position: naver.maps.Position.LEFT_CENTER, |
||||
style: naver.maps.drawing.DrawingStyle.VERTICAL |
||||
}, |
||||
controlPointOptions: { |
||||
anchorPointOptions: { |
||||
radius: 5, |
||||
fillColor: '#ff0000', |
||||
strokeColor: '#0000ff', |
||||
strokeWeight: 2 |
||||
}, |
||||
midPointOptions: { |
||||
radius: 4, |
||||
fillColor: '#ff0000', |
||||
strokeColor: '#0000ff', |
||||
strokeWeight: 2, |
||||
fillOpacity: 0.5 |
||||
} |
||||
}, |
||||
rectangleOptions: { |
||||
fillColor: '#ff0000', |
||||
fillOpacity: 0.3, |
||||
strokeWeight: 2, |
||||
strokeColor: '#ff0000' |
||||
}, |
||||
ellipseOptions: { |
||||
fillColor: '#ff25dc', |
||||
fillOpacity: 0.3, |
||||
strokeWeight: 2, |
||||
strokeColor: '#ff25dc' |
||||
}, |
||||
polylineOptions: { // 화살표 아이콘 계열 옵션은 무시됩니다.
|
||||
strokeColor: '#222', |
||||
strokeWeight: 2 |
||||
}, |
||||
polygonOptions: { |
||||
fillColor: '#ffc300', |
||||
fillOpacity: 0.3, |
||||
strokeWeight: 2, |
||||
strokeColor:'#ffc300' |
||||
} |
||||
}); |
||||
drawingManager.setMap(map); |
||||
} |
||||
|
||||
return null; |
||||
}; |
||||
|
Loading…
Reference in new issue