반응형
아래 코드는 gson.json의 지리적 데이터를 사용하여 시/도를 다각형으로 표시하고, 마우스 이벤트에 따라 지역을 표시하고 지역을 클릭하면 해당 지역의 중심으로 맵을 확대하는 여러 가지 기능을 카카오 맵 API를 통해 구현해 봤습니다.
- 소스코드 설명
- displayMap
- GeoJSON 데이터 파일을 가져와서 displayMap 함수에 좌표와 이름을 넣고 호출합니다. 좌표를 사용해 다각형을 생성하고 맵에 표시합니다. 또한 다각형과의 마우스 오버, 마우스 이동, 마우스 아웃 및 클릭에 대한 이벤트 리스너를 설정합니다.
- centerMap
- 다각형의 꼭짓점 좌표를 기반으로 다각형의 중심점(중심)을 계산합니다.
- overlaySet
- 지역 이름이 표시된 커스텀 오버레이를 설정합니다. 다각형의 중심점을 계산하고 해당 위치에 커스텀 오버레이를 생성합니다.
소스 코드 확인하시고 응용해서 사용하시면 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<style>
.overlaybox {top:-50px; left:-50px; position:relative;width:100px;height:100px;background:url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/box_movie.png') no-repeat;padding:15px 10px;}
.overlaybox .boxtitle {text-align:center; color:#fff;font-size:16px;font-weight:bold;margin-bottom:8px;}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js" /></script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=카카오맵키&libraries=services"></script>
</head>
<body>
<div class="map-wrap" style="position: absolute; left: 0; top: 0; right: 0; bottom: 60px;">
<div id="map" style="width:100%; height:100%"></div>
</div>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(36.6358, 127.4911), // 지도의 중심좌표:충북
level: 12// 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption)
customOverlay = new kakao.maps.CustomOverlay({});
$.getJSON('gson.json', function(geojson) {
var data = geojson.features;
var coordinates = [];
var name = '';
$.each(data, function(index, val) {
coordinates = val.geometry.coordinates;
name = val.properties.CTP_KOR_NM;
displayMap(coordinates, name);
});
});
var polygons=[]; //전역변수
//대한민국 지도 폴리곤
function displayMap(coordinates, name) {
var path = [];
var points = [];
var pathArr = [];
$.each(coordinates[0], function(index, coordinate) {
var point = new Object();
point.x = coordinate[1];
point.y = coordinate[0];
points.push(point);
path.push(new daum.maps.LatLng(coordinate[1], coordinate[0]))
pathArr.push([coordinate[1], coordinate[0]]);
});
// 다각형을 생성합니다
var polygon = new daum.maps.Polygon({
map : map, // 다각형을 표시할 지도 객체
path : path,
strokeWeight : 2,
strokeColor : '#004c80',
strokeOpacity : 0.8,
fillColor : '#fff',
fillOpacity : 0.7
});
polygons.push(polygon);
overlaySet(name, points);
daum.maps.event.addListener(polygon, 'mouseover', function(mouseEvent) {
polygon.setOptions({
fillColor : '#09f'
});
var content= '<div class="overlaybox">';
content += ' <div class="boxtitle">' + name + '</div> ';
content += '</div>';
customOverlay.setContent(content);
customOverlay.setPosition(mouseEvent.latLng);
customOverlay.setMap(map);
});
// 다각형에 mousemove 이벤트를 등록하고 이벤트가 발생하면 동작한다.
daum.maps.event.addListener(polygon, 'mousemove', function(mouseEvent) {
console.log('mousemove 이벤트');
});
// 다각형에 mouseout 이벤트를 등록하고 이벤트가 발생하면 폴리곤의 색을 변경하고, 커스텀오버레이를 변경한다.
// 커스텀 오버레이를 지도에서 제거합니다
daum.maps.event.addListener(polygon, 'mouseout', function() {
polygon.setOptions({
fillColor : '#fff'
});
customOverlay.setMap(null);
overlaySet(name, points);
});
// 다각형에 click 이벤트를 등록하고 이벤트가 발생하면 해당 지역 확대을 확대한다.
daum.maps.event.addListener(polygon, 'click', function() {
// 현재 지도 레벨에서 2레벨 확대한 레벨
var level = map.getLevel()-2;
// 지도를 클릭된 폴리곤의 중앙 위치를 기준으로 확대합니다
map.setLevel(level, {anchor: centerMap(points), animate: {
duration: 350
}});
});
}
//centroid 알고리즘 (폴리곤 중심좌표 구하기 위함)
function centerMap (points) {
var i, j, len, p1, p2, f, area, x, y;
area = x = y = 0;
for (i = 0, len = points.length, j = len - 1; i < len; j = i++) {
p1 = points[i];
p2 = points[j];
f = p1.y * p2.x - p2.y * p1.x;
x += (p1.x + p2.x) * f;
y += (p1.y + p2.y) * f;
area += f * 3;
}
return new daum.maps.LatLng(x / area, y / area);
}
function overlaySet (name, points) {
var content = '<div class="area" style="font-weight:bold; font-size:10px;">' + name + '</div>';
// 커스텀 오버레이가 표시될 위치입니다
var position = centerMap(points);
// 커스텀 오버레이를 생성합니다
customOverlay = new kakao.maps.CustomOverlay({
position: position,
content: content,
xAnchor: 0.3,
yAnchor: 0.91
});
// 커스텀 오버레이를 지도에 표시합니다
customOverlay.setMap(map);
}
</script>
</body>
</html>
아래는 제가 사용한 폴리곤 데이터 파일 입니다.
반응형
'개발이야기 > 자바스크립트' 카테고리의 다른 글
| [자바스크립트] Base64 사용방법/예제 (인코딩, 디코딩, 한글, 특수문자) (0) | 2023.07.28 |
|---|---|
| [자바스크립트] 카카오맵 API 이용해 카테고리 장소 마커로 보여주기 (2) | 2023.07.25 |
| [자바스크립트] 주식 수익률 계산기 만들기 (0) | 2023.07.20 |
| [자바스크립트] 문자열 하이픈 넣기 (생년월일, 핸드폰/전화번호) (0) | 2023.07.18 |
| [자바스크립트] 특정 영역으로 스크롤 이동하기 (페이지 로드, 앵커 클릭) (0) | 2023.07.12 |
댓글