제목 그대도 지도에 마커 표기 후 반경내 원 그리기를 만들었는데 일정 갯수 이상되니 원이 표기가 되지 않습니다.
물론 마커는 전부 표기되는데 마커는 377개 표기 했으며
반원은 대량 200개? 넘어가면서 표기가 안되는것 같습니다. 원래 그런가요?
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 지도에 표시할 원을 생성합니다
var 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);
마커는 전부 다 확인되나… 원형은 여전히 안되네요…혹시 작성하셨던 코드 참고 해볼 수 있을까요?
var circle18 = new kakao.maps.Circle({
center : new kakao.maps.LatLng(37.6160471, 126.8401948), // 원의 중심좌표 입니다
radius: 3000, // 미터 단위의 원의 반지름입니다
strokeWeight: 2, // 선의 두께입니다
strokeColor: ‘#75B8FA’, // 선의 색깔입니다
strokeOpacity: 1, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: ‘dashed’, // 선의 스타일 입니다
fillColor: ‘#32BEBE’, // 채우기 색깔입니다
fillOpacity: 0.3 // 채우기 불투명도 입니다
});
var circle19 = new kakao.maps.Circle({
center : new kakao.maps.LatLng(37.4543603, 126.7117401), // 원의 중심좌표 입니다
radius: 3000, // 미터 단위의 원의 반지름입니다
strokeWeight: 2, // 선의 두께입니다
strokeColor: ‘#75B8FA’, // 선의 색깔입니다
strokeOpacity: 1, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: ‘dashed’, // 선의 스타일 입니다
fillColor: ‘#32BEBE’, // 채우기 색깔입니다
fillOpacity: 0.3 // 채우기 불투명도 입니다
});
생성한 원 객체에 circle.setMap(map);을 호출하지 않아서 지도에 보이지 않는건지도 확인해주세요.
아래 코드처럼 circle 생성 시 지도에 map 옵션을 적용하면
생성과 동시에 지도에 원을 표시해서 circle.setMap(map);을 호출하지 않아도 됩니다.
map 옵션을 적용해서 다시 확인해주시고 보이지 않는 원 정보를 추려서 테스트 코드 작성 및 실행할 때는
지도에 표시되는지, 데이터가 올바른지 함께 확인해주세요.
//원 중심좌표 정보를 담은 배열
let positions = [
{x: 126.99421849699539, y: 37.53401162895581},
{x: 126.990174761387, y: 37.5346042203356},
//…
];
for(let i=0; i<positions.length; i++) {
var circle = new kakao.maps.Circle({
map: map,
center : new kakao.maps.LatLng(positions[i].y, positions[i].x), // 원의 중심좌표 입니다
radius: 30, // 미터 단위의 원의 반지름입니다
strokeWeight: 2, // 선의 두께입니다
strokeColor: '#75B8FA', // 선의 색깔입니다
strokeOpacity: 1, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: 'dashed', // 선의 스타일 입니다
fillColor: '#32BEBE', // 채우기 색깔입니다
fillOpacity: 0.3 // 채우기 불투명도 입니다
});
}