KakaoMap - db 등록된 위도, 경도를 가지고 마커 클러스터러 사용하기

https://apis.map.kakao.com/web/guide/#loadlibrary

 

카카오맵 마커 클러스터러 사용하기

 

 

 

 //app key 뒤에 &libraries=services,drawing,clusterer 라는 라이브러리 사용해야한다.
 
 public function loadAssets($map_key = null){
        if($map_key == null) $map_key = app('amuz.keychain')->getValueById('maemulmoa_kakao');
        XeFrontend::js("//dapi.kakao.com/v2/maps/sdk.js?libraries=services&appkey=" . $map_key ."&libraries=services,drawing,clusterer")->appendTo('head')->load();
        XeFrontend::js('/plugins/maemulmoa/src/Skins/Properties/assets/js/maemulmoa.js')->appendTo('body')->load();
        XeFrontend::css('/plugins/maemulmoa/src/Skins/Properties/assets/css/skin.css')->load();
    }

@php
  $positions = "";
@endphp

@foreach($paginate as $item)
    @php
        $positions .= "positions.push({
            lat : ".$item->map_lat .",
            lng : ".$item->map_lng.",
            title: '". $item->map_doro ."'
        });\n\r";
    @endphp
@endforeach

{{ app('xe.frontend')->html('mmoa.positions')->content('
<script>
    var positions = [];
    '.$positions.'
</script>
')->prependTo('head')->load() }}

 

//마커 클러스터러 사용하기
var map = new kakao.maps.Map(document.getElementById('map'), { // 지도를 표시할 div
  center : new kakao.maps.LatLng(36.2683, 127.6358), // 지도의 중심좌표
  level : 12 // 지도의 확대 레벨
});

// 마커 클러스터러를 생성합니다
var clusterer = new kakao.maps.MarkerClusterer({
  map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
  averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
  minLevel: 10 // 클러스터 할 최소 지도 레벨
});


// 마커들을 저장할 변수 생성(마커 클러스터러 관련)
var markers = [];

for (var i = 0; i < positions.length; i++ ) {

  // 지도에 마커를 생성하고 표시한다.
  var marker = new kakao.maps.Marker({
    position: new kakao.maps.LatLng(positions[i].lat, positions[i].lng), // 마커의 좌표
    // position: new kakao.maps.LatLng(positions[i][0], positions[i][1]), //이렇게 하면 안먹힘
    map: map // 마커를 표시할 지도 객체
  });

  // 생성된 마커를 마커 저장하는 변수에 넣음(마커 클러스터러 관련)
  markers.push(marker);
}

// 클러스터러에 마커들을 추가합니다(마커 클러스터러 관련)
clusterer.addMarkers(markers);