[네이버지도API/AJAX] 마커 여러 개 띄우기/디비에 있는 데이터 지도에 표시하기/지도를 움직일 때마다 중심 좌표 얻기/현재 화면에 보이는 마커만 표시하기

사실 원하는 메소드는 네이버 지도 API 홈페이지에서 찾는 게 제일 효율적입니다.

https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Marker.html

NAVER Maps API v3

javascript

// x,y = 지도를 오픈할 중심 좌표 값
function storeOpen(x, y) {
	var MARKER_ICON_URL = 'resources/img/이미지아이콘경로.png';
	
    // 파라미터로 받은 좌표 값으로 지도 생성
	var map = new naver.maps.Map('map', {
	    center: new naver.maps.LatLng(x, y),
	    zoom: 15 //지도 확대 정도
	});
	
    // 중심 좌표를 기준으로한 좌표 경계
    // 쉽게 말해서 화면 안에 표시되는 좌표의 범위
    // 이 부분은 수정하면 안 됨
	var bounds = map.getBounds(),
	    southWest = bounds.getSW(),
	    northEast = bounds.getNE(),
	    lngSpan = northEast.lng() - southWest.lng(),
	    latSpan = northEast.lat() - southWest.lat();
	
    // 디비에서 가져올 각 좌표들의 마커를 저장 할 배열
	var markers = [];
	
    // 디비에서 조회 할 중심 좌표
	var param = { "pi_x": x, "pi_y": y  };
	
	$.ajax({
        url : "store.do",
        data : param,
        type : "post",
        success : function(data){
           // 컨트롤러에서 보낸 데이터
           // 중심 좌표 반경 2km내에 속하는 좌표의 리스트(객체)
           var storelist = data.store;
		   
           // 객체 수 만큼 마커 생성하여 배열에 담기
           $.each(storelist , function(i, store){
        	   // 객체가 가진 좌표 값 셋팅
        	   var position = new naver.maps.LatLng(store.pi_x, store.pi_y);
			   // 마커 생성
    		   var marker = new naver.maps.Marker({
    		       map: map, // 위에서 생성한 지도
    		       position: position, // 객체의 좌표 값
    		       title: store.store_name,
    		       icon: {
    		           url: MARKER_ICON_URL, // 아이콘 경로 설정
    		           size: new naver.maps.Size(36, 49), // 아이콘 사이즈 설정
    		           anchor: new naver.maps.Point(12, 37),
    		           origin: new naver.maps.Point(0, 0)
    		       },
    		       zIndex: 100
    		   });

    		    markers.push(marker);
           });

        },
        error : function(request,status,error){
        	alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
        }
    });
	
    // 확대, 축소 시 마커 변경 이벤트
	naver.maps.Event.addListener(map, 'zoom_changed', function() {
	    updateMarkers(map, markers);

	});
    
	// 지도 드래그 시 마커 변경 이벤트
	naver.maps.Event.addListener(map, 'dragend', function() {
	    updateMarkers(map, markers);
	});
}

// 마커 갱신 이벤트
function updateMarkers(map, markers) {
	
    // 지도의 변경된 중심 좌표 출력
    var mapaddr = map.getCenter();
	console.log(mapaddr.y);
	console.log(mapaddr.x);
	
    var mapBounds = map.getBounds();
    var marker, position;
	
    // 이동된 중심 좌표를 기준으로 해당 반경 안에 있는 마커만 보여줌
    for (var i = 0; i < markers.length; i++) {

        marker = markers[i]
        position = marker.getPosition();

        if (mapBounds.hasLatLng(position)) {
            showMarker(map, marker);
        } else {
            hideMarker(map, marker);
        }
    }
}

// 지도 움직임에 따라 마커 보임
function showMarker(map, marker) {

    if (marker.setMap()) return;
    marker.setMap(map);
}

// 지도 움직임에 따라 마커 숨김
function hideMarker(map, marker) {

    if (!marker.setMap()) return;
    marker.setMap(null);
}

 

Controller

@RequestMapping("store.do")
@ResponseBody
public HashMap<String, Object> nearStoreOpen(DataDTO dto) {

  List<StoreDTO> list = dao.StoreMapSearch(dto);

  HashMap<String, Object> result = new HashMap <String, Object>();
  
  result.put("store", list);

  return result;
}

 

jsp

<!-- 배경 map -->
<div class="api">
   <div id="map" style="width: 100%; height: 100%;"></div>
</div>