ProgrammingJavascript

[leaflet] divIcon 마커 찍기

, , ,

[leaflet] divIcon 마커 찍기

데이터 구조

1
2
3
4
5
6
7
8
9
10
11
items = [
    {   
        buld_nm : 'A 아파트',
        st_x : '126.123',
        st_y : '37.123'
    }, {
        buld_nm : 'B 백화점',
        st_x : '123.123',
        st_y : '34.123'
    }
]

함수 호출

1
2
// 마커 찍기
mymap.addSearchMarker(this.items);

마커 레이어 추가

1
2
3
4
5
6
var cities = new L.LayerGroup();

L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);

레이어 관리 오브젝트

1
var layerMap = {};
1
2
3
4
5
6
var key = "searchMarker";
var layer = layerMap[key];
if (layer) map.removeLayer(layer);

layer = new L.LayerGroup().addTo(map);
layerMap[key] = layer;

데이터 삽입

for 문 사용

1
2
3
4
for (var i =0; i < items.length; i++){
	item = items[i];
    L.marker([item.st_y, item.st_x]).addTo(layer);
}

마커가 안보이는 경우 x, y 의 순서를 바꿔서 입력해 봅니다.

divIcon 사용

1
2
3
4
5
6
7
8
9
10
var searchIcon = L.divIcon({
    //iconSize: new L.Point(50, 50),
	iconSize: null,
    html: '<span class="map-point">A</span>'
});

for (var i =0; i < items.length; i++){
	var item = items[i];
	L.marker([item.st_y, item.st_x], {icon: searchIcon}).addTo(layer).bindPopup(item.buld_nm);
}

divIcon 반환 함수 생성

i 가 0 이면 A, 1이면 B를 반환하도록 함수 생성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function getSearchIcon(i){
	// 0 : A
	var chr = String.fromCharCode(65 + i)

	var searchIcon = L.divIcon({  
		iconSize: null,
	    html: '<span class="map-point">' + chr + '</span>',
	    iconAnchor : [ 13, 32 ],
		popupAnchor : [ 0, -10 ]
	});

	return {
		icon: searchIcon
	}
}

호출 함수

1
2
3
4
for (var i =0; i < items.length; i++){
	var item = items[i];
	L.marker([item.st_y, item.st_x], getSearchIcon(i)).bindTooltip(item.buld_nm, tooltipOption).addTo(layer);
}

출처

공유하기