다각형에 마우스아웃, 마우스오버, 마우스다운 이벤트를 등록합니다. 다각형에 마우스다운 이벤트가 발생하면 지도 아래 div에 마우스다운 이벤트 발생을 표시합니다. 다각형에 마우스오버 이벤트가 발생하면 다각형의 채우기 색을 변경하고 마우스아웃 이벤트가 발생하면 다각형의 채우기 색을 처음 색으로 변경합니다.
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 2 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 다각형을 구성하는 좌표 배열입니다. 이 좌표들을 이어서 다각형을 표시합니다
var polygonPath = [
new kakao.maps.LatLng(33.450965145649576, 126.57020280169624),
new kakao.maps.LatLng(33.450958085478554, 126.57011679275952),
new kakao.maps.LatLng(33.45098043867851, 126.57006290510864),
new kakao.maps.LatLng(33.45097328515681, 126.56995000794919),
new kakao.maps.LatLng(33.450990859851004, 126.56981816664641),
new kakao.maps.LatLng(33.45101296099739, 126.5696916806749),
new kakao.maps.LatLng(33.45098334215462, 126.56960040542974),
new kakao.maps.LatLng(33.450985176064975, 126.56947939729541),
new kakao.maps.LatLng(33.450917277011726, 126.56939906680272),
new kakao.maps.LatLng(33.45086322853736, 126.56941277823229),
new kakao.maps.LatLng(33.45081577388131, 126.56937805752437),
new kakao.maps.LatLng(33.450779813154405, 126.56940781273165),
new kakao.maps.LatLng(33.45081633405741, 126.56953938654304),
new kakao.maps.LatLng(33.45080569884398, 126.56972228175628),
new kakao.maps.LatLng(33.450752219367345, 126.56990001069012),
new kakao.maps.LatLng(33.45065801908533, 126.57003491859678),
new kakao.maps.LatLng(33.45063139100987, 126.57015604858434),
new kakao.maps.LatLng(33.45064506393239, 126.5701990028593)
];
// 지도에 표시할 다각형을 생성합니다
var polygon = new kakao.maps.Polygon({
path:polygonPath, // 그려질 다각형의 좌표 배열입니다
strokeWeight: 3, // 선의 두께입니다
strokeColor: '#39DE2A', // 선의 색깔입니다
strokeOpacity: 0.8, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: 'solid', // 선의 스타일입니다
fillColor: '#A2FF99', // 채우기 색깔입니다
fillOpacity: 0.7 // 채우기 불투명도 입니다
});
// 지도에 다각형을 표시합니다
polygon.setMap(map);
// 다각형에 마우스오버 이벤트가 발생했을 때 변경할 채우기 옵션입니다
var mouseoverOption = {
fillColor: '#EFFFED', // 채우기 색깔입니다
fillOpacity: 0.8 // 채우기 불투명도 입니다
};
// 다각형에 마우스아웃 이벤트가 발생했을 때 변경할 채우기 옵션입니다
var mouseoutOption = {
fillColor: '#A2FF99', // 채우기 색깔입니다
fillOpacity: 0.7 // 채우기 불투명도 입니다
};
// 다각형에 마우스오버 이벤트를 등록합니다
kakao.maps.event.addListener(polygon, 'mouseover', function() {
// 다각형의 채우기 옵션을 변경합니다
polygon.setOptions(mouseoverOption);
});
kakao.maps.event.addListener(polygon, 'mouseout', function() {
// 다각형의 채우기 옵션을 변경합니다
polygon.setOptions(mouseoutOption);
});
// 다각형에 마우스다운 이벤트를 등록합니다
var downCount = 0;
kakao.maps.event.addListener(polygon, 'mousedown', function() {
console.log(event);
var resultDiv = document.getElementById('result');
resultDiv.innerHTML = '다각형에 mousedown 이벤트가 발생했습니다!' + (++downCount);
}); <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>다각형에 이벤트 등록하기1</title>
</head>
<body>
<div id="map" style="width:100%;height:350px;"></div>
<p id="result"></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: 2 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 다각형을 구성하는 좌표 배열입니다. 이 좌표들을 이어서 다각형을 표시합니다
var polygonPath = [
new kakao.maps.LatLng(33.450965145649576, 126.57020280169624),
new kakao.maps.LatLng(33.450958085478554, 126.57011679275952),
new kakao.maps.LatLng(33.45098043867851, 126.57006290510864),
new kakao.maps.LatLng(33.45097328515681, 126.56995000794919),
new kakao.maps.LatLng(33.450990859851004, 126.56981816664641),
new kakao.maps.LatLng(33.45101296099739, 126.5696916806749),
new kakao.maps.LatLng(33.45098334215462, 126.56960040542974),
new kakao.maps.LatLng(33.450985176064975, 126.56947939729541),
new kakao.maps.LatLng(33.450917277011726, 126.56939906680272),
new kakao.maps.LatLng(33.45086322853736, 126.56941277823229),
new kakao.maps.LatLng(33.45081577388131, 126.56937805752437),
new kakao.maps.LatLng(33.450779813154405, 126.56940781273165),
new kakao.maps.LatLng(33.45081633405741, 126.56953938654304),
new kakao.maps.LatLng(33.45080569884398, 126.56972228175628),
new kakao.maps.LatLng(33.450752219367345, 126.56990001069012),
new kakao.maps.LatLng(33.45065801908533, 126.57003491859678),
new kakao.maps.LatLng(33.45063139100987, 126.57015604858434),
new kakao.maps.LatLng(33.45064506393239, 126.5701990028593)
];
// 지도에 표시할 다각형을 생성합니다
var polygon = new kakao.maps.Polygon({
path:polygonPath, // 그려질 다각형의 좌표 배열입니다
strokeWeight: 3, // 선의 두께입니다
strokeColor: '#39DE2A', // 선의 색깔입니다
strokeOpacity: 0.8, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: 'solid', // 선의 스타일입니다
fillColor: '#A2FF99', // 채우기 색깔입니다
fillOpacity: 0.7 // 채우기 불투명도 입니다
});
// 지도에 다각형을 표시합니다
polygon.setMap(map);
// 다각형에 마우스오버 이벤트가 발생했을 때 변경할 채우기 옵션입니다
var mouseoverOption = {
fillColor: '#EFFFED', // 채우기 색깔입니다
fillOpacity: 0.8 // 채우기 불투명도 입니다
};
// 다각형에 마우스아웃 이벤트가 발생했을 때 변경할 채우기 옵션입니다
var mouseoutOption = {
fillColor: '#A2FF99', // 채우기 색깔입니다
fillOpacity: 0.7 // 채우기 불투명도 입니다
};
// 다각형에 마우스오버 이벤트를 등록합니다
kakao.maps.event.addListener(polygon, 'mouseover', function() {
// 다각형의 채우기 옵션을 변경합니다
polygon.setOptions(mouseoverOption);
});
kakao.maps.event.addListener(polygon, 'mouseout', function() {
// 다각형의 채우기 옵션을 변경합니다
polygon.setOptions(mouseoutOption);
});
// 다각형에 마우스다운 이벤트를 등록합니다
var downCount = 0;
kakao.maps.event.addListener(polygon, 'mousedown', function() {
console.log(event);
var resultDiv = document.getElementById('result');
resultDiv.innerHTML = '다각형에 mousedown 이벤트가 발생했습니다!' + (++downCount);
});
</script>
</body>
</html>