직사각형 생성/삭제
지도위에 사각형 도형을 생성 삭제 할 수 있습니다.
직사각형 생성/삭제
지도위에 사각형 도형을 생성 삭제 할 수 있습니다.
var map = new routo.maps.Map("map", {
center: { lat: 37.507009, lng: 127.0586339 }, // 지도 초기 위치
zoom: 18, // 지도 로딩 시 최초 표시 레벨
});
var rectangle = null;
var createRectangle = document.querySelector('#create-rectangle');
createRectangle.addEventListener('click', function() {
// 직사각형이 그려질 영역을 좌표로 정의
var bounds = {
east: 127.0590339, // 직사각형의 X축 우측 좌표
north: 37.507309, // 직사각형의 Y축 상단 좌표
south: 37.506709, // 직사각형의 Y축 하단 좌표
west: 127.0580339, // 직사각형의 X축 좌측 좌표
};
rectangle = new routo.maps.Rectangle({
bounds: bounds
});
rectangle.setMap(map);
// 생성된 직사각형에 맞춰서 지도 화면을 이동할 때, 직사각형 기준으로 상하좌우 여백을 정의
var offset = {
top: 20, // 상단 여백
right: 20, // 우측 여백
bottom: 20, // 하단 여백
left: 20, // 좌측 여백
};
// 생성한 직사각형의 범위로 지도 화면 이동
map.fitBounds(rectangle.getBounds(), offset);
});
var deleteRectangle = document.querySelector('#delete-rectangle');
deleteRectangle.addEventListener('click', function() {
rectangle.setMap(null);
rectangle = null;
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>사각형 생성 삭제하기</title>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.map {
width: 100%;
height: 400px;
position: relative;
}
</style>
</head>
<body>
<h2>사각형 생성 삭제하기</h2>
<hr />
<p>
지도위에 사각형 도형을 생성 삭제 할 수 있습니다.
</p>
<div class="map-container">
<div class="map-tool-bar">
<button id="create-rectangle" class="cs-btn3">사각형 생성하기</button>
<button id="delete-rectangle" class="cs-btn3">사각형 삭제하기</button>
</div>
<div id="map" class="map"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://api.routo.com/v2/maps/map?key={APIKEY}"></script>
<script>
var map = new routo.maps.Map("map", {
center: { lat: 37.507009, lng: 127.0586339 }, // 지도 초기 위치
zoom: 18, // 지도 로딩 시 최초 표시 레벨
});
var rectangle = null;
var createRectangle = document.querySelector('#create-rectangle');
createRectangle.addEventListener('click', function() {
// 직사각형이 그려질 영역을 좌표로 정의
var bounds = {
east: 127.0590339, // 직사각형의 X축 우측 좌표
north: 37.507309, // 직사각형의 Y축 상단 좌표
south: 37.506709, // 직사각형의 Y축 하단 좌표
west: 127.0580339, // 직사각형의 X축 좌측 좌표
};
rectangle = new routo.maps.Rectangle({
bounds: bounds
});
rectangle.setMap(map);
// 생성된 직사각형에 맞춰서 지도 화면을 이동할 때, 직사각형 기준으로 상하좌우 여백을 정의
var offset = {
top: 20, // 상단 여백
right: 20, // 우측 여백
bottom: 20, // 하단 여백
left: 20, // 좌측 여백
};
// 생성한 직사각형의 범위로 지도 화면 이동
map.fitBounds(rectangle.getBounds(), offset);
});
var deleteRectangle = document.querySelector('#delete-rectangle');
deleteRectangle.addEventListener('click', function() {
rectangle.setMap(null);
rectangle = null;
});
</script>
</body>
</html>