[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
지도 api key를 발급받아 구현중인데, 지도는 표시되지만 마커 클러스터러는 표시되지 않습니다.
현재 제 코드입니다****************************************************
제주 실증<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" style="background-color:#F6F6F6">
<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=APP_KEY"></script>
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=APP_KEY&libraries=services,clusterer" async defer></script>
<div>
<div class="map_wrap">
<div id="map"></div>
<!-- 지도타입 컨트롤 div -->
<div class="custom_typecontrol radius_border">
<span id="btnRoadmap" class="selected_btn" onclick="setMapType('roadmap')">지도</span>
<span id="btnSkyview" class="btn" onclick="setMapType('skyview')">스카이뷰</span>
</div>
<!-- 지도 확대, 축소 컨트롤 div -->
<div class="custom_zoomcontrol radius_border">
<span onclick="zoomIn()"><img src="https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/ico_plus.png" alt="확대"></span>
<span onclick="zoomOut()"><img src="https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/ico_minus.png" alt="축소"></span>
</div>
</div>
</div>
<script src="jeju.js"></script>
<script>
var map = new kakao.maps.Map(document.getElementById('map'), { // 지도를 표시할 div
center : new kakao.maps.LatLng(33.49954172665357, 126.53124314850928), // 지도의 중심좌표
level : 3 // 지도의 확대 레벨
});
// 마커 클러스터러를 생성합니다
// 마커 클러스터러를 생성할 때 disableClickZoom 값을 true로 지정하지 않은 경우
// 클러스터 마커를 클릭했을 때 클러스터 객체가 포함하는 마커들이 모두 잘 보이도록 지도의 레벨과 영역을 변경합니다
// 이 예제에서는 disableClickZoom 값을 true로 설정하여 기본 클릭 동작을 막고
// 클러스터 마커를 클릭했을 때 클릭된 클러스터 마커의 위치를 기준으로 지도를 1레벨씩 확대합니다
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 10, // 클러스터 할 최소 지도 레벨
disableClickZoom: true // 클러스터 마커를 클릭했을 때 지도가 확대되지 않도록 설정한다
});
// 데이터를 가져오기 위해 jQuery를 사용합니다
// 데이터를 가져와 마커를 생성하고 클러스터러 객체에 넘겨줍니다
$.get("https://apis.map.kakao.com/download/web/data/chicken.json", function(data) {
// 데이터에서 좌표 값을 가지고 마커를 표시합니다
// 마커 클러스터러로 관리할 마커 객체는 생성할 때 지도 객체를 설정하지 않습니다
var markers = $(data.positions).map(function(i, position) {
return new kakao.maps.Marker({
position : new kakao.maps.LatLng(position.lat, position.lng)
});
});
// 클러스터러에 마커들을 추가합니다
clusterer.addMarkers(markers);
});
// 마커 클러스터러에 클릭이벤트를 등록합니다
// 마커 클러스터러를 생성할 때 disableClickZoom을 true로 설정하지 않은 경우
// 이벤트 헨들러로 cluster 객체가 넘어오지 않을 수도 있습니다
kakao.maps.event.addListener(clusterer, 'clusterclick', function(cluster) {
// 현재 지도 레벨에서 1레벨 확대한 레벨
var level = map.getLevel()-1;
// 지도를 클릭된 클러스터의 마커의 위치를 기준으로 확대합니다
map.setLevel(level, {anchor: cluster.getCenter()});
});
</script>
</body>
아래와 같이 데이터를 직접 입력해도 마커 클러스터러가 보이지 않습니다*****************
var data = {
“positions”: [
{
“lat”: 37.27943075229118,
“lng”: 127.01763998406159
},
{
“lat”: 37.55915668706214,
“lng”: 126.92536526611102
},
{
“lat”: 35.13854258261161,
“lng”: 129.1014781294671
},
{
“lat”: 37.55518388656961,
“lng”: 126.92926237742505
}]
};
var markers = data.positions.map(function(position) {
return new kakao.maps.Marker({
position : new kakao.maps.LatLng(position.lat, position.lng)
});
});
// 클러스터러에 마커들을 추가합니다
clusterer.addMarkers(markers);