var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.transform([-122.332071, 47.606209], 'EPSG:4326', 'EPSG:3857'),
zoom: 9
})
});
이 지도 객체는 OpenStreetMaps(OSM)을 baseMap으로 사용하도록 설정되어 있고, new ol.source.OSM()으로 OSM을 호출한다.
map.addOverlay(new ol.Overlay({
position: ol.proj.transform(
[-122.332071, 47.606209],
'EPSG:4326',
'EPSG:3857'
),
element: $('<img src="/img/marker.png">')
}));
좌표계 때문에 위도와 경도를 가지고 바로 지도에 마커를 찍을 수는 없기 때문에, "transform"을 이용해서 위경도를 지도의 좌표계로 변환해서 지도에 마커를 찍는다.
또한, 어느 줌 레벨 이상부터 마커가 보이게 할지 설정할 수도 있다.
지도 위에 새로운 "Overlay" 를 추가하여 여기에 마커를 찍게 되는데, 오버레이나 마커는 원하는 만큼 추가할 수 있다.
마커에 팝오버를 추가할 수도 있다. 아래의 코드는 당신의 콘텐츠를 팝오버로 띄우는 방법을 말해준다.
이 방법은 다른 마커를 선택해서 , 다른 팝 오버를 띄워야 하는 경우 기존의 마커들을 숨길 수도 있다.
map.addOverlay(new ol.Overlay({
position: ol.proj.transform(
[-122.332071, 47.606209],
'EPSG:4326',
'EPSG:3857'
),
element: $('<img class="location-popover" src="/img/marker.png">')
.css({marginTop: '-200%', marginLeft: '-50%', cursor: 'pointer'})
.popover({
'placement': 'top',
'html': true,
'content':'<strong>Location Name</strong>'
})
.on('click', function (e) { $(".location-popover").not(this).popover('hide'); })
}));