지도를 마우스로 클릭하면 다각형 그리기가 시작되고 마우스 오른쪽 버튼을 클릭하면 다각형 그리기가 종료되고 그려진 다각형의 총 면적을 표시합니다.
지도를 마우스로 클릭하면 다각형 그리기가 시작되고
오른쪽 마우스를 클릭하면 다각형 그리기가 종료됩니다
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
var drawingFlag = false; // 다각형이 그려지고 있는 상태를 가지고 있을 변수입니다
var drawingPolygon; // 그려지고 있는 다각형을 표시할 다각형 객체입니다
var polygon; // 그리기가 종료됐을 때 지도에 표시할 다각형 객체입니다
var areaOverlay; // 다각형의 면적정보를 표시할 커스텀오버레이 입니다
// 마우스 클릭 이벤트가 발생하고나면 drawingFlag가 그려지고 있는 상태인 ture 값으로 바뀝니다
// 그려지고 있는 상태인 경우 drawingPolygon 으로 그려지고 있는 다각형을 지도에 표시합니다
// 마우스 오른쪽 클릭 이벤트가 발생하면 drawingFlag가 그리기가 종료된 상태인 false 값으로 바뀌고
// polygon 으로 다 그려진 다각형을 지도에 표시합니다
// 지도에 마우스 클릭 이벤트를 등록합니다
// 지도를 클릭하면 다각형 그리기가 시작됩니다 그려진 다각형이 있으면 지우고 다시 그립니다
kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
// 마우스로 클릭한 위치입니다
var clickPosition = mouseEvent.latLng;
// 지도 클릭이벤트가 발생했는데 다각형이 그려지고 있는 상태가 아니면
if (!drawingFlag) {
// 상태를 true로, 다각형을 그리고 있는 상태로 변경합니다
drawingFlag = true;
// 지도 위에 다각형이 표시되고 있다면 지도에서 제거합니다
if (polygon) {
polygon.setMap(null);
polygon = null;
}
// 지도 위에 면적정보 커스텀오버레이가 표시되고 있다면 지도에서 제거합니다
if (areaOverlay) {
areaOverlay.setMap(null);
areaOverlay = null;
}
// 그려지고 있는 다각형을 표시할 다각형을 생성하고 지도에 표시합니다
drawingPolygon = new kakao.maps.Polygon({
map: map, // 다각형을 표시할 지도입니다
path: [clickPosition], // 다각형을 구성하는 좌표 배열입니다 클릭한 위치를 넣어줍니다
strokeWeight: 3, // 선의 두께입니다
strokeColor: '#00a0e9', // 선의 색깔입니다
strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
strokeStyle: 'solid', // 선의 스타일입니다
fillColor: '#00a0e9', // 채우기 색깔입니다
fillOpacity: 0.2 // 채우기 불투명도입니다
});
// 그리기가 종료됐을때 지도에 표시할 다각형을 생성합니다
polygon = new kakao.maps.Polygon({
path: [clickPosition], // 다각형을 구성하는 좌표 배열입니다 클릭한 위치를 넣어줍니다
strokeWeight: 3, // 선의 두께입니다
strokeColor: '#00a0e9', // 선의 색깔입니다
strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
strokeStyle: 'solid', // 선의 스타일입니다
fillColor: '#00a0e9', // 채우기 색깔입니다
fillOpacity: 0.2 // 채우기 불투명도입니다
});
} else { // 다각형이 그려지고 있는 상태이면
// 그려지고 있는 다각형의 좌표에 클릭위치를 추가합니다
// 다각형의 좌표 배열을 얻어옵니다
var drawingPath = drawingPolygon.getPath();
// 좌표 배열에 클릭한 위치를 추가하고
drawingPath.push(clickPosition);
// 다시 다각형 좌표 배열을 설정합니다
drawingPolygon.setPath(drawingPath);
// 그리기가 종료됐을때 지도에 표시할 다각형의 좌표에 클릭 위치를 추가합니다
// 다각형의 좌표 배열을 얻어옵니다
var path = polygon.getPath();
// 좌표 배열에 클릭한 위치를 추가하고
path.push(clickPosition);
// 다시 다각형 좌표 배열을 설정합니다
polygon.setPath(path);
}
});
// 지도에 마우스무브 이벤트를 등록합니다
// 다각형을 그리고있는 상태에서 마우스무브 이벤트가 발생하면 그려질 다각형의 위치를 동적으로 보여주도록 합니다
kakao.maps.event.addListener(map, 'mousemove', function (mouseEvent) {
// 지도 마우스무브 이벤트가 발생했는데 다각형을 그리고있는 상태이면
if (drawingFlag){
// 마우스 커서의 현재 위치를 얻어옵니다
var mousePosition = mouseEvent.latLng;
// 그려지고있는 다각형의 좌표배열을 얻어옵니다
var path = drawingPolygon.getPath();
// 마우스무브로 추가된 마지막 좌표를 제거합니다
if (path.length > 1) {
path.pop();
}
// 마우스의 커서 위치를 좌표 배열에 추가합니다
path.push(mousePosition);
// 그려지고 있는 다각형의 좌표를 다시 설정합니다
drawingPolygon.setPath(path);
}
});
// 지도에 마우스 오른쪽 클릭 이벤트를 등록합니다
// 다각형을 그리고있는 상태에서 마우스 오른쪽 클릭 이벤트가 발생하면 그리기를 종료합니다
kakao.maps.event.addListener(map, 'rightclick', function (mouseEvent) {
// 지도 오른쪽 클릭 이벤트가 발생했는데 다각형을 그리고있는 상태이면
if (drawingFlag) {
// 그려지고있는 다각형을 지도에서 제거합니다
drawingPolygon.setMap(null);
drawingPolygon = null;
// 클릭된 죄표로 그릴 다각형의 좌표배열을 얻어옵니다
var path = polygon.getPath();
// 다각형을 구성하는 좌표의 개수가 3개 이상이면
if (path.length > 2) {
// 지도에 다각형을 표시합니다
polygon.setMap(map);
var area = Math.round(polygon.getArea()), // 다각형의 총면적을 계산합니다
content = '<div class="info">총면적 <span class="number"> ' + area + '</span> m<sup>2</sup></div>'; // 커스텀오버레이에 추가될 내용입니다
// 면적정보를 지도에 표시합니다
areaOverlay = new kakao.maps.CustomOverlay({
map: map, // 커스텀오버레이를 표시할 지도입니다
content: content, // 커스텀오버레이에 표시할 내용입니다
xAnchor: 0,
yAnchor: 0,
position: path[path.length-1] // 커스텀오버레이를 표시할 위치입니다. 위치는 다각형의 마지막 좌표로 설정합니다
});
} else {
// 다각형을 구성하는 좌표가 2개 이하이면 다각형을 지도에 표시하지 않습니다
polygon = null;
}
// 상태를 false로, 그리지 않고 있는 상태로 변경합니다
drawingFlag = false;
}
}); <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>다각형의 면적 계산하기</title>
<style>
.info {position:relative;top:5px;left:5px;border-radius:6px;border: 1px solid #ccc;border-bottom:2px solid #ddd;font-size:12px;padding:5px;background:#fff;list-style:none;margin:0;}
.info:nth-of-type(n) {border:0; box-shadow:0px 1px 2px #888;}
.info .label {display:inline-block;width:50px;}
.number {font-weight:bold;color:#00a0e9;}
</style>
</head>
<body>
<div id="map" style="width:100%;height:350px;"></div>
<p>
<em>지도를 마우스로 클릭하면 다각형 그리기가 시작되고 <br>오른쪽 마우스를 클릭하면 다각형 그리기가 종료됩니다</em>
</p>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
var drawingFlag = false; // 다각형이 그려지고 있는 상태를 가지고 있을 변수입니다
var drawingPolygon; // 그려지고 있는 다각형을 표시할 다각형 객체입니다
var polygon; // 그리기가 종료됐을 때 지도에 표시할 다각형 객체입니다
var areaOverlay; // 다각형의 면적정보를 표시할 커스텀오버레이 입니다
// 마우스 클릭 이벤트가 발생하고나면 drawingFlag가 그려지고 있는 상태인 ture 값으로 바뀝니다
// 그려지고 있는 상태인 경우 drawingPolygon 으로 그려지고 있는 다각형을 지도에 표시합니다
// 마우스 오른쪽 클릭 이벤트가 발생하면 drawingFlag가 그리기가 종료된 상태인 false 값으로 바뀌고
// polygon 으로 다 그려진 다각형을 지도에 표시합니다
// 지도에 마우스 클릭 이벤트를 등록합니다
// 지도를 클릭하면 다각형 그리기가 시작됩니다 그려진 다각형이 있으면 지우고 다시 그립니다
kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
// 마우스로 클릭한 위치입니다
var clickPosition = mouseEvent.latLng;
// 지도 클릭이벤트가 발생했는데 다각형이 그려지고 있는 상태가 아니면
if (!drawingFlag) {
// 상태를 true로, 다각형을 그리고 있는 상태로 변경합니다
drawingFlag = true;
// 지도 위에 다각형이 표시되고 있다면 지도에서 제거합니다
if (polygon) {
polygon.setMap(null);
polygon = null;
}
// 지도 위에 면적정보 커스텀오버레이가 표시되고 있다면 지도에서 제거합니다
if (areaOverlay) {
areaOverlay.setMap(null);
areaOverlay = null;
}
// 그려지고 있는 다각형을 표시할 다각형을 생성하고 지도에 표시합니다
drawingPolygon = new kakao.maps.Polygon({
map: map, // 다각형을 표시할 지도입니다
path: [clickPosition], // 다각형을 구성하는 좌표 배열입니다 클릭한 위치를 넣어줍니다
strokeWeight: 3, // 선의 두께입니다
strokeColor: '#00a0e9', // 선의 색깔입니다
strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
strokeStyle: 'solid', // 선의 스타일입니다
fillColor: '#00a0e9', // 채우기 색깔입니다
fillOpacity: 0.2 // 채우기 불투명도입니다
});
// 그리기가 종료됐을때 지도에 표시할 다각형을 생성합니다
polygon = new kakao.maps.Polygon({
path: [clickPosition], // 다각형을 구성하는 좌표 배열입니다 클릭한 위치를 넣어줍니다
strokeWeight: 3, // 선의 두께입니다
strokeColor: '#00a0e9', // 선의 색깔입니다
strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
strokeStyle: 'solid', // 선의 스타일입니다
fillColor: '#00a0e9', // 채우기 색깔입니다
fillOpacity: 0.2 // 채우기 불투명도입니다
});
} else { // 다각형이 그려지고 있는 상태이면
// 그려지고 있는 다각형의 좌표에 클릭위치를 추가합니다
// 다각형의 좌표 배열을 얻어옵니다
var drawingPath = drawingPolygon.getPath();
// 좌표 배열에 클릭한 위치를 추가하고
drawingPath.push(clickPosition);
// 다시 다각형 좌표 배열을 설정합니다
drawingPolygon.setPath(drawingPath);
// 그리기가 종료됐을때 지도에 표시할 다각형의 좌표에 클릭 위치를 추가합니다
// 다각형의 좌표 배열을 얻어옵니다
var path = polygon.getPath();
// 좌표 배열에 클릭한 위치를 추가하고
path.push(clickPosition);
// 다시 다각형 좌표 배열을 설정합니다
polygon.setPath(path);
}
});
// 지도에 마우스무브 이벤트를 등록합니다
// 다각형을 그리고있는 상태에서 마우스무브 이벤트가 발생하면 그려질 다각형의 위치를 동적으로 보여주도록 합니다
kakao.maps.event.addListener(map, 'mousemove', function (mouseEvent) {
// 지도 마우스무브 이벤트가 발생했는데 다각형을 그리고있는 상태이면
if (drawingFlag){
// 마우스 커서의 현재 위치를 얻어옵니다
var mousePosition = mouseEvent.latLng;
// 그려지고있는 다각형의 좌표배열을 얻어옵니다
var path = drawingPolygon.getPath();
// 마우스무브로 추가된 마지막 좌표를 제거합니다
if (path.length > 1) {
path.pop();
}
// 마우스의 커서 위치를 좌표 배열에 추가합니다
path.push(mousePosition);
// 그려지고 있는 다각형의 좌표를 다시 설정합니다
drawingPolygon.setPath(path);
}
});
// 지도에 마우스 오른쪽 클릭 이벤트를 등록합니다
// 다각형을 그리고있는 상태에서 마우스 오른쪽 클릭 이벤트가 발생하면 그리기를 종료합니다
kakao.maps.event.addListener(map, 'rightclick', function (mouseEvent) {
// 지도 오른쪽 클릭 이벤트가 발생했는데 다각형을 그리고있는 상태이면
if (drawingFlag) {
// 그려지고있는 다각형을 지도에서 제거합니다
drawingPolygon.setMap(null);
drawingPolygon = null;
// 클릭된 죄표로 그릴 다각형의 좌표배열을 얻어옵니다
var path = polygon.getPath();
// 다각형을 구성하는 좌표의 개수가 3개 이상이면
if (path.length > 2) {
// 지도에 다각형을 표시합니다
polygon.setMap(map);
var area = Math.round(polygon.getArea()), // 다각형의 총면적을 계산합니다
content = '<div class="info">총면적 <span class="number"> ' + area + '</span> m<sup>2</sup></div>'; // 커스텀오버레이에 추가될 내용입니다
// 면적정보를 지도에 표시합니다
areaOverlay = new kakao.maps.CustomOverlay({
map: map, // 커스텀오버레이를 표시할 지도입니다
content: content, // 커스텀오버레이에 표시할 내용입니다
xAnchor: 0,
yAnchor: 0,
position: path[path.length-1] // 커스텀오버레이를 표시할 위치입니다. 위치는 다각형의 마지막 좌표로 설정합니다
});
} else {
// 다각형을 구성하는 좌표가 2개 이하이면 다각형을 지도에 표시하지 않습니다
polygon = null;
}
// 상태를 false로, 그리지 않고 있는 상태로 변경합니다
drawingFlag = false;
}
});
</script>
</body>
</html>