웹의 지도 구현하기 폴리곤

728x90

영역에 대한 정보는 별도로 제공하지 않습니다.
직접 구축을 하셔야 하구요,
영역 정보가 있다면 폴리곤을 이용하여 그리시면 됩니다.
http://apis.map.daum.net/web/documentation/#Polygon 21

출처 : https://apis.map.kakao.com/web/sample/addPolygonMouseEvent1/

---------------캐캐오맵 아래 예시처럼... 폴리곤형태로 만들고 이벤트를 생성해야한다.---------------

각형에 마우스아웃, 마우스오버, 마우스다운 이벤트를 등록합니다. 다각형에 마우스다운 이벤트가 발생하면 지도 아래 div에 마우스다운 이벤트 발생을 표시합니다. 다각형에 마우스오버 이벤트가 발생하면 다각형의 채우기 색을 변경하고 마우스아웃 이벤트가 발생하면 다각형의 채우기 색을 처음 색으로 변경합니다.

<!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>

'개발언어 > 지도' 카테고리의 다른 글

[Javascript] 다음 지도 API로 네이버 부동산 지도 따라하기 - 2. geojson 만들기 (0)	2021.06.09
다음 지도 API로 네이버 부동산 지도 따라하기 - 1. 데이터 가져오는 방법 고찰.. (0)	2021.06.09
지도관련 주요사이트 (0)	2021.06.09
지도파일 변환하기 (0)	2021.06.09
대한민국 행정구역(시도, 시군구) GeoJSON 파일 다운로드 및 SHP 파일 단순화 후 변환 방법 설명 (0)	2021.06.09