안녕하세요 리액트로 카카오맵에 시/도 단위로 폴리곤을 만드려 합니다.
폴리곤이 다 로딩된 후 다시 한번 지도를 그리면 축소/확대할때 축소/확대 전 지도모양이 남아있는데 어떻게 해결해야하나요?
또한 렌더링할때 {areas&& } 대신 {isloaded&& }을 사용하면 CORS에러가 발생하는데 해결법이 있을까요?
import "../styles/test.scss";
import React, { useEffect, useState } from "react";
import sido from "../data/sido.json";
const { kakao } = window;
function Map() {
const [areas, setAreas] = useState([]);
const [isloaded, setIsloaded] = useState(false);
useEffect(() => {
const result = pushData();
setAreas(areas.concat(result));
setMap();
}, [isloaded]);
useEffect(() => {
console.log(areas);
}, []);
function pushData() {
let newData = {
name: sido.features[0].properties.CTP_KOR_NM,
path: [],
};
sido.features[0].geometry.coordinates.map((arr) =>
arr.map((data) =>
newData.path.push(new kakao.maps.LatLng(data[1], data[0]))
)
);
return newData;
}
function setMap() {
const container = document.getElementById("map");
const options = {
center: new kakao.maps.LatLng(37.504894, 127.0456489),
level: 5,
};
const map = new kakao.maps.Map(container, options),
customOverlay = new kakao.maps.CustomOverlay({}),
infowindow = new kakao.maps.InfoWindow({ removable: true });
function displayArea(area) {
// 다각형을 생성합니다
let polygon = new kakao.maps.Polygon({
map: map, // 다각형을 표시할 지도 객체
path: area.path,
strokeWeight: 2,
strokeColor: "#004c80",
strokeOpacity: 0.8,
fillColor: "#fff",
fillOpacity: 0.7,
});
// 다각형에 mouseover 이벤트를 등록하고 이벤트가 발생하면 폴리곤의 채움색을 변경합니다
// 지역명을 표시하는 커스텀오버레이를 지도위에 표시합니다
polygon.addListener("mouseover", function (mouseEvent) {
polygon.setOptions({ fillColor: "#09f" });
customOverlay.setContent('<div class="area">' + area.name + "</div>");
customOverlay.setPosition(mouseEvent.latLng);
customOverlay.setMap(map);
});
// 다각형에 mousemove 이벤트를 등록하고 이벤트가 발생하면 커스텀 오버레이의 위치를 변경합니다
polygon.addListener("mousemove", function (mouseEvent) {
customOverlay.setPosition(mouseEvent.latLng);
});
// 다각형에 mouseout 이벤트를 등록하고 이벤트가 발생하면 폴리곤의 채움색을 원래색으로 변경합니다
// 커스텀 오버레이를 지도에서 제거합니다
polygon.addListener("mouseout", function () {
polygon.setOptions({ fillColor: "#fff" });
customOverlay.setMap(null);
});
// 다각형에 click 이벤트를 등록하고 이벤트가 발생하면 다각형의 이름과 면적을 인포윈도우에 표시합니다
polygon.addListener("click", function (mouseEvent) {
let content = `<div class="info">
<div class="title">
area.name
</div></div>`;
infowindow.setContent(content);
infowindow.setPosition(mouseEvent.latLng);
infowindow.setMap(map);
});
}
areas.map((area) => displayArea(area));
setIsloaded(true);
}
return (
<>
{areas && (
<div id="map" style={{ width: "100%", height: "70vh" }}></div>
)}
</>
);
}
export default Map;