Notice
Recent Posts
Recent Comments
Link
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Developer Gonie

4. 카카오 MAP API, 구 단위 행정구역 폴리곤 띄우고 마우스 이벤트 리스너 붙이기 본문

개인 공부/카카오 Map API

4. 카카오 MAP API, 구 단위 행정구역 폴리곤 띄우고 마우스 이벤트 리스너 붙이기

이대곤 2022. 9. 7. 16:34

실행결과

* 카카오 MAP API 도큐먼트에서 나와있는 실행예제는 8개의 구만 보여지는데,

  내가 데이터를 직접 구해 서울의 모든 구의 폴리곤을 만들었다.

- 구 단위의 행정구역이 폴리곤으로 보여진다.

- 마우스를 올리면 해당 구역의 이름이 보여진다.

- 클릭하면 해당 지역의 총 면적이 보여진다.

실행코드

json 파일이 준비된 상태에서 실행해야 한다.

사용한 파일을 만드는 방법은 다음의 글들을 참고하자.

1~5 번까지 따라하면 아래서 사용한 json파일을 얻을 수 있다.

https://ldgeao99-developer.tistory.com/556?category=1097479 

 

1.대한민국 행정구역 데이터 SHP 파일 얻기

* 아래의 사이트에서는 대한민국 최신 행정구역 데이터를 제공하고 있다. 시도 단위, 시군구 단위, 읍면동 단위, 리 단위 등을 각각 제공한다. http://www.gisdeveloper.co.kr/?p=2332 * 얻은 파일을 열어 확

ldgeao99-developer.tistory.com

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>다각형에 이벤트 등록하기2</title>
    <style>
		.area {
		    position: absolute;
		    background: #fff;
		    border: 1px solid #888;
		    border-radius: 3px;
		    font-size: 12px;
		    top: -5px;
		    left: 15px;
		    padding:2px;
		}
		
		.info {
		    font-size: 12px;
		    padding: 5px;
		}
		.info .title {
		    font-weight: bold;
		}
	</style>
	
</head>
<body>

<div id="map" style="width:60%;height:500px;"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 API KEY를 입력하세요"></script>
<script>
	// 지도에 폴리곤으로 표시할 영역데이터 배열입니다 
	var areas = [];
	
	/* 1. JSON 파일을 읽어들여 areas 배열을 채워넣는 작업 */
	
	// 1) getJSON도 ajax 메소드와 같이 async(비동기) 방식으로 동작하는데, 순차실행을 위해 이걸 강제로 sync 방식으로 동작하도록 함.
	$.ajaxSetup({
		async : false 
	}); 
	
	// 2) getJSON 메소드를 이용해 JSON 파일을 파싱함
	$.getJSON("resources/only_seoul.json", function(geojson) {
		var units = geojson.features; // 파일에서 key값이 "features"인 것의 value를 통으로 가져옴(이것은 여러지역에 대한 정보를 모두 담고있음)			
		$.each(units, function(index, unit) { // 1개 지역씩 꺼내서 사용함. val은 그 1개 지역에 대한 정보를 담음
			var coordinates = []; //좌표 저장할 배열
			var name = ''; // 지역 이름

			coordinates = unit.geometry.coordinates; // 1개 지역의 영역을 구성하는 도형의 모든 좌표 배열을 가져옴 
			name = unit.properties.SIG_KOR_NM; // 1개 지역의 이름을 가져옴

			var ob = new Object();
			ob.name = name;
			ob.path = [];

			$.each(coordinates[0], function(index, coordinate) { // []로 한번 더 감싸져 있어서 index 0번의 것을 꺼내야 배열을 접근가능.
				ob.path
						.push(new kakao.maps.LatLng(coordinate[1],
								coordinate[0]));
			});

			areas[index] = ob;
		});//each
	});//getJSON

	/* 2. 지도 띄우기 */
	
	var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = { 
        center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
        level: 8 // 지도의 확대 레벨
    };	

	var map = new kakao.maps.Map(mapContainer, mapOption),
    customOverlay = new kakao.maps.CustomOverlay({}),
    infowindow = new kakao.maps.InfoWindow({removable: true});
	
	/* 3. 폴리곤 도형을 지도위에 띄우고 마우스 이벤트 붙이기 */
	
	// 지도에 영역데이터를 폴리곤으로 표시합니다 
	for (var i = 0, len = areas.length; i < len; i++) {
		displayArea(areas[i]);
	}

	// 다각형을 생상하고 이벤트를 등록하는 함수입니다
	function displayArea(area) {

	    // 다각형을 생성합니다 
	    var polygon = new kakao.maps.Polygon({
	        map: map, // 다각형을 표시할 지도 객체
	        path: area.path,
	        strokeWeight: 2,
	        strokeColor: '#004c80',
	        strokeOpacity: 0.8,
	        fillColor: '#fff',
	        fillOpacity: 0.7 
	    });

	    // 다각형에 mouseover 이벤트를 등록하고 이벤트가 발생하면 폴리곤의 채움색을 변경합니다 
	    // 지역명을 표시하는 커스텀오버레이를 지도위에 표시합니다
	    kakao.maps.event.addListener(polygon, 'mouseover', function(mouseEvent) {
	        polygon.setOptions({fillColor: '#09f'});

	        customOverlay.setContent('<div class="area">' + area.name + '</div>');
	        
	        customOverlay.setPosition(mouseEvent.latLng); 
	        customOverlay.setMap(map);
	    });

	    // 다각형에 mousemove 이벤트를 등록하고 이벤트가 발생하면 커스텀 오버레이의 위치를 변경합니다 
	    kakao.maps.event.addListener(polygon, 'mousemove', function(mouseEvent) {
	        
	        customOverlay.setPosition(mouseEvent.latLng); 
	    });

	    // 다각형에 mouseout 이벤트를 등록하고 이벤트가 발생하면 폴리곤의 채움색을 원래색으로 변경합니다
	    // 커스텀 오버레이를 지도에서 제거합니다 
	    kakao.maps.event.addListener(polygon, 'mouseout', function() {
	        polygon.setOptions({fillColor: '#fff'});
	        customOverlay.setMap(null);
	    }); 

	    // 다각형에 click 이벤트를 등록하고 이벤트가 발생하면 다각형의 이름과 면적을 인포윈도우에 표시합니다 
	    kakao.maps.event.addListener(polygon, 'click', function(mouseEvent) {
	        var content = '<div class="info">' + 
	                    '   <div class="title">' + area.name + '</div>' +
	                    '   <div class="size">총 면적 : 약 ' + Math.floor(polygon.getArea()) + ' m<sup>2</sup></div>' +
	                    '</div>';

	        infowindow.setContent(content); 
	        infowindow.setPosition(mouseEvent.latLng); 
	        infowindow.setMap(map);
	    });
	}
	
</script>
</body>
</html>
저작자표시

'개인 공부 > 카카오 Map API' 카테고리의 다른 글

카카오 MAP API 행정구역 폴리곤으로 구분하고 클릭이벤트시 해당지역 확대하기.  (0) 2022.09.06
지도 특정위치로 바로가기  (0) 2022.09.06
3. 카카오 Map API에서 사용해야하는 좌표계  (0) 2022.09.06
2. 카카오 Map API, kakao is not defined 에러 해결(Kakao 지도 API)  (0) 2022.09.06
1. 카카오 Map API, Key 발급부터 실행까지(Kakao 지도 API)  (0) 2022.09.05
'개인 공부/카카오 Map API' Related Articles more
Comments