지도에 polygon 생성을 하기 위한 샘플 예시를 따라서 작업을 하였는데, 화면에 다각형이 표시가 되지 않습니다.
하단에 작성한 예시코드 첨부합니다.
let container = document.getElementById(‘map’);
let options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
}
let map = new kakao.maps.Map(container, options);
let marker = new kakao.maps.Marker({
map: map,
position: new kakao.maps.LatLng(33.450701, 126.570667)
})
marker.setMap(map)
// let listPath = userPolygon.map(coord => new window.kakao.maps.LatLng(coord.yaxis, coord.xaxis))
let circle = new kakao.maps.Circle({
center : new kakao.maps.LatLng(33.450701, 126.570667), // 원의 중심좌표 입니다
radius: 50, // 미터 단위의 원의 반지름입니다
strokeWeight: 5, // 선의 두께입니다
strokeColor: ‘#75B8FA’, // 선의 색깔입니다
strokeOpacity: 1, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: ‘dashed’, // 선의 스타일 입니다
fillColor: ‘#CFE7FF’, // 채우기 색깔입니다
fillOpacity: 0.7 // 채우기 불투명도 입니다
});
circle.setMap(map);
let polygonPath = [
new kakao.maps.LatLng(33.45133510810506, 126.57159381623066),
new kakao.maps.LatLng(33.44955812811862, 126.5713551811832),
new kakao.maps.LatLng(33.449986291544086, 126.57263296172184),
new kakao.maps.LatLng(33.450682513554554, 126.57321034054742),
new kakao.maps.LatLng(33.451346760004206, 126.57235740081413)
]
let polygon = new kakao.maps.Polygon({
map: map,
path: polygonPath,
strokeWeight: 3, // 선의 두께입니다
strokeColor: '#39DE2A', // 선의 색깔입니다
strokeOpacity: 0.8, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: 'longdash', // 선의 스타일입니다
fillColor: '#A2FF99', // 채우기 색깔입니다
fillOpacity: 0.7 // 채우기 불투명도 입니다
})
polygon.setMap(map)
