[네이버 지도] 마커 표시 변경

전에 올린 마커 클러스터링 문서와 이어지는 내용

마커 목록에서 마커를 선택했을 경우 지도 상에 표시된 해당 마커의 디자인을 변경해서 표시

 

[CSS 추가]

//--------------------------------------
// CSS 추가
//--------------------------------------
// 마커용 css
.list > ol > li { display: flex; align-items: center; }
.list > ol > li:hover { background-color: rgba(3, 133, 255, 0.5); }
.list > ol > li > input { margin-right: 5px; }

.cm { display: flex; font-weight: bold; align-items: center; text-align: center; }
.cm > div:nth-child(1) { width: 32px; height: 32px; }
.cm > div:nth-child(2) { position: absolute; background-color: #2f96fc; width: 32px; height: 32px; border-radius: 28px; line-height: 32px; margin-bottom: 8px; z-index: 9; }
.cm > div:nth-child(3) { position: absolute; background-color: #ffffff; width: 24px; height: 24px; border-radius: 24px; line-height: 24px; margin-left: 4px; margin-bottom: 8px; z-index: 10; }

[마커 설정]

//--------------------------------------
// 마커 설정
//--------------------------------------
var markers = [];

for (var i = 0, ii = options.length; i < ii; i++) {
	markers.push(new naver.maps.Marker({
		position: new naver.maps.LatLng(options[i].pos[0], options[i].pos[1]),
		zIndex: 100,
		icon: {
			content: [
				'<div>',
				'	<div><img src="marker.png" /></div>',
				'</div>',
			].join(''),
			anchor: new naver.maps.Point(11, 33),
		}
	}));
}

[마커 표시]

//--------------------------------------
// 마커 표시
//--------------------------------------
// 마커 info 속성 표시
function showMarkerInfo(marker) {
	var img = $(marker.getIcon().content).find('img');
	var chk = img.attr('choose');
	var json = attr2json(img.attr('info'));
	var li = $('마커 : code = '+ json.code +', name = '+ json.name +'');
	$('#list').append(li);
	
	//체크박스 change 이벤트 설정
	li.on('change', chooseMarker.bind(this, json.code, marker));
}

[선택한 마커 아이콘 변경]

//--------------------------------------
// 선택한 마커 아이콘 변경
//--------------------------------------
var _cCount = 0;

//체크한 마커 아이콘 변경
function chooseMarker(c, marker) {
	var img = $(marker.getIcon().content).find('img');
	
	if ($('#cb'+ c).prop('checked')) {
		_cCount++;
		
		var icon = {
			content: [
				'<div class="cm">',
				'	<div><img src="marker.png" /></div>',
				'	<div> </div>',
				'	<div>'+ _cCount +'</div>',
				'</div>',
			].join(''),
			anchor: new naver.maps.Point(16, 33),
		};
	} else {
		_cCount--;
		
		var icon = {
			content: [
            	'<div>',
				'	<div><img src="marker.png" /></div>',
				'</div>',
			].join(''),
			anchor: new naver.maps.Point(11, 33),
		};
	}
	
	marker.setIcon(icon);
}