주소를 이용해 여러개 마크 표시하기 기능을 구현했습니다.
그런데, 클러스터러 기능을 추가를 하는 걸 모르겠습니다.
- 마커 클러스터러 사용하기
http://apis.map.kakao.com/web/sample/basicClusterer/
저는 주소를 이용해 여러개 마크 표시할 때 sdk에 라이브러리=서비스를 선택했는데,
&library=services
저 예제에서는 library=clusterer 라고 되어있더라구요.
이걸로 바꾸면 주소 변환이 또 안되서 @_@;;
// 마커 클러스터러를 생성합니다
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 10 // 클러스터 할 최소 지도 레벨
});
// 클러스터러에 마커들을 추가합니다
clusterer.addMarkers(markers);
제 코드에 이것만 추가하면 될거 같은데 어 잘안되네요…
<block cond="!$document_srl">
<div id="map" style="width:100%;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=키입력&libraries=services"></script>
<script>
var listData = [
<!--@if($document_list)-->
<!--@foreach($document_list as $no => $document)-->
["{$document->getExtraEidValue('address')[1]}","{$document->getExtraEidValue('fish')}","?document_srl={$document->document_srl}"],
<!--@end-->
<!--@end-->
];
var mapContainer = document.getElementById('map');
var mapOption = {
center: new daum.maps.LatLng(35.95, 128.25),
level: 13
};
// 맵 표시
var map = new daum.maps.Map(mapContainer, mapOption);
// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
if (navigator.geolocation) {
// GeoLocation을 이용해서 접속 위치를 얻어옵니다
navigator.geolocation.getCurrentPosition(function(position) {
lat = position.coords.latitude; // 위도
lon = position.coords.longitude; // 경도
var locPosition = new daum.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
message = '<div style="padding:5px;width:220px;">'+ lat + ' / ' + lon +'</div>'; // 인포윈도우에 표시될 내용입니다
// 마커와 인포윈도우를 표시합니다
displayMarker(locPosition, message);
var idGap = document.getElementById("digit");
idGap.innerHTML = "위도 : "+ lat +" , 경도 : " + lon;
});
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
console.log("ㅇㅇㅇ");
var locPosition = new daum.maps.LatLng(33.450701, 126.570667),
message = 'geolocation을 사용할수 없어요..'
displayMarker(locPosition, message);
}
// 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
var mapTypeControl = new kakao.maps.MapTypeControl();
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
// 주소 -> 좌표 변환 라이브러리
var geocoder = new daum.maps.services.Geocoder();
// foreach loop
listData.forEach(function(addr, index) {
geocoder.addressSearch(addr[0], function(result, status) {
if (status === daum.maps.services.Status.OK) {
var coords = new daum.maps.LatLng(result[0].y, result[0].x);
// 마커 이미지의 이미지 주소입니다
var imageSrc = "http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
// 마커 이미지의 이미지 크기 입니다
var imageSize = new kakao.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
var marker = new daum.maps.Marker({
position: coords,
clickable: true,
image : markerImage // 마커 이미지
});
// 마커를 지도에 표시합니다.
marker.setMap(map);
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">' + addr[1] + '</div>',
removable : false // 마우스드래그
});
// 마커에 클릭이벤트를 등록합니다
// kakao.maps.event.addListener(marker, 'click', function() {
// // 마커 위에 인포윈도우를 표시합니다
// infowindow.open(map, marker);
// });
kakao.maps.event.addListener(marker, 'click', function(){
// 마커 위에 인포윈도우를 표시합니다
infowindow.open(map, marker);
var position = this.getPosition();
// var url = 'https://map.kakao.com/link/map/'+position.getLat()+','+position.getLng();
// window.open(url, '_blank');
var url = addr[2];
location.href=url;
// var url = "{getUrl('document_srl',$document->document_srl,'listStyle',$listStyle,'cpage','')}";
// location.href=url;
});
}
});
});
<!--@foreach($document_list as $no => $document)-->
// {$document->getExtraEidValue('address')[1]};
console.log("{getUrl('document_srl',$document->document_srl,'listStyle',$listStyle,'cpage','')}")
console.log("{$document->getExtraEidValue('fish')}")
console.log("{$document->getExtraEidValue('address')[1]}")
<!--@end-->
// {$document->getExtraEidValue('address')[1]};
//{$document->getExtraEidValue('fish')}
</script>
</block>