반응형
<!DOCTYPE html>
<html>
<head>
<title>오픈레이어스 클릭 이벤트</title>
<script src="https://cdn.jsdelivr.net/npm/ol@v9.2.4/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v9.2.4/ol.css">
<style>
.map {
height: 960px;
width: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
let map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
url: 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png'
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([128.4, 35.7]),
zoom: 7
})
});
// 클릭 이벤트부분
map.on('click', function(evt){
console.log(evt.coordinate);
})
</script>
</body>
</html>반응형
'공부 > OpenLayers' 카테고리의 다른 글
| OpenLayers(오픈레이어스) 지도 확대, 축소 (0) | 2024.06.16 |
|---|---|
| OpenLayers(오픈레이어스) 지도 위 마커 생성 (0) | 2024.06.14 |
| OpenLayers(오픈레이어스)란 / 지도 띄우기 (0) | 2024.06.11 |