[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
var mapContainer = document.getElementById('map');
var mapOption = {
center: new kakao.maps.LatLng(37.50109336423557, 126.86725915242668),
level: 5
};
var map = new kakao.maps.Map(mapContainer, mapOption);
// 지도에 지형정보를 표시하도록 지도타입을 추가합니다
map.addOverlayMapTypeId(kakao.maps.MapTypeId.TERRAIN);
// 지도를 클릭했을때 클릭한 위치에 마커를 추가하도록 지도에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
// 클릭한 위치에 마커를 표시합니다
addMarker(mouseEvent.latLng);
});
// 지도에 표시된 마커 객체를 가지고 있을 배열입니다
var markers = [];
var clusterer;
// 마커를 생성하고 지도위에 표시하는 함수입니다
function addMarker(position) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: position
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
// 생성된 마커를 배열에 추가합니다
markers.push(marker);
//clusterer.clear();
//clusterer.addMarkers(markers);
}
//마커에 클러스터 추가하기
var clusterer = new kakao.maps.MarkerClusterer({
map: map,
averageCenter: true,
minLevel: 5,
calculator: [10, 30, 50],
texts: getTexts,
styles: [
{
width: '30px',
height: '30px',
background: 'rgba(255, 215, 0, 0.8)',
borderRadius: '15px',
color: '#000',
textAlign: 'center',
fontWeight: 'bold',
lineHeight: '31px'
},
{
width: '40px',
height: '40px',
background: 'rgba(255, 153, 0, .8)',
borderRadius: '20px',
color: '#000',
textAlign: 'center',
fontWeight: 'bold',
lineHeight: '41px'
},
{
width: '60px',
height: '60px',
background: 'rgba(255, 80, 80, .8)',
borderRadius: '30px',
color: '#000',
textAlign: 'center',
fontWeight: 'bold',
lineHeight: '61px'
}
]
});
function getTexts(count) {
if (count < 10) {
return '위험';
} else if (count < 30) {
return '매우위험';
} else {
return '접근금지';
}
}
</script>
작성한 코드는 이렇습니다.