geunsoo96
commented
1 year ago 정말 고생하셨어요~
Open geunsoo96 opened 1 year ago
geunsoo96
commented
1 year ago 정말 고생하셨어요~
YANGSANGHEE
commented
1 year ago 고생많으셨습니다 :)
const CCTV = () => { const [cctv, Setcctv] = useState(null);
useEffect(() => {
axios
.get("http://localhost:8080/cctv")
.then((res: AxiosResponse) => {
Setcctv(res.data);
const CCTV = res.data;
// cctv데이터 변수 선언
const container = document.getElementById("map");
const options = {
center: new kakao.maps.LatLng(36.3504119, 127.3845475),
level: 9,
};
// 초기 카카오맵 설정값
const mapScript = new kakao.maps.Map(container, options);
// 카카오맵 기본 설정 좌표 실행
const mapTypeControl = new kakao.maps.MapTypeControl();
// 지도와 스카이뷰를 선택해서 볼 수 있음.
mapScript.addControl(
mapTypeControl,
kakao.maps.ControlPosition.TOPRIGHT
);
const imgSrc = "/img/CCTV.png",
// 마커 디자인 소스
imgSize = new kakao.maps.Size(25, 40);
// 마커 사이즈
const imageOption = { offset: new kakao.maps.Point(15, 33) };
// 마커 포인트 위치 지정
const markerImg = new kakao.maps.MarkerImage(
// 마커 디자인 변경
imgSrc,
imgSize,
imageOption
);
let array: any = [];
for (let i = 0; i < CCTV.length; i++) {
const marker = new kakao.maps.Marker({
// 마커 함수
map: mapScript,
// 카카오맵
position: new kakao.maps.LatLng(CCTV[i].y, CCTV[i].x),
// 받아온 데이터 좌표 뿌리기
image: markerImg,
// 마커 이미지 변경
});
let iwContent =
<iframe src=${CCTV[i].url} style='width:350px; height: 300px'>+ ""; // iframe 태그를 활용하여 url 링크 출력 const infowindow = new window.kakao.maps.InfoWindow({ // 영상 출력 함수 zIndex: 1, content: iwContent, removable: true, // 닫기버튼 기능 }); // 비디오 영상구현 array.push(infowindow); // 배열에 영상화면 함수 담아놓기 const close = () => { for (let i = 0; i < array.length; i++) { // 반복문을 통한 창닫기 기능 함수 array[i].close(); } }; kakao.maps.event.addListener(marker, "click", function () { close(); // close함수를 우선작성하여 다른 마커를 클릭했을시 기존 영상화면은 닫힘. infowindow.open(mapScript, marker); }); kakao.maps.event.addListener(mapScript, "click", function () { // 카카오맵 어느곳이든 클릭하면 영상이 닫히는 함수 close(); }); marker.setMap(mapScript); } // CCTV.map((el: any) => { // }); const setDraggable = (draggable: any) => { // 마우스 드래그로 지도 이동 가능여부를 설정 mapScript.setDraggable(draggable); }; setDraggable(true); // 드래그 가능 console.log("loading kakaomap"); }) .catch((e: ErrorCallback) => { if (e) throw e; console.log("에러"); }); }, []);