지도에 마커 표기 후 반경 원 그리기 갯수제한?

지도/로컬 API
1

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610

반갑습니다.

제목 그대도 지도에 마커 표기 후 반경내 원 그리기를 만들었는데 일정 갯수 이상되니 원이 표기가 되지 않습니다.
물론 마커는 전부 표기되는데 마커는 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);
2

첨부 코드 참고해서 마커와 원형을 300개씩 생성해봤는데 모두 생성이 됩니다.
현상을 확인할 수 있는 전체 코드도 함께 첨부해주세요.
그리고 마커, 그리기 객체 수가 많으면 지도가 느려지게 됩니다.
아래 답변도 참고해주세요.
https://devtalk.kakao.com/t/topic/70927/2?u=lea.ju

3

이런식으로 단순박복해서 작성하였습니다…

circle(숫자증가) 현재는 337개 정도 생성하였습니다.

지도 표현은 아래와 같이 단순 반복으로 했습니다…

// 지도에 원을 표시합니다

circle1.setMap(map);
circle2.setMap(map);
circle3.setMap(map);
circle4.setMap(map);
circle5.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 // 채우기 불투명도 입니다
});
image

4

생성한 원 객체에 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 // 채우기 불투명도 입니다
    });
}