$(document).ready(function() {
$(“#displaypoly”).click(function() {
displayArea(coordinates, name);
});
});
var polygons = []; // 폴리곤을 저장할 배열
var coordinates = [];
var name = ‘’;
function displayArea(coordinates, name) {
var path = []; // 폴리곤 그려줄 path
var points = []; // 중심좌표 구하기 위한 지역구 좌표들
// coordinates[0] 내의 중첩 배열을 반복하면서 좌표 데이터 추출
$.each(coordinates[0], function(index, coordinate) {
var point = new Object();
point.x = coordinate[0];
point.y = coordinate[1];
points.push(point);
path.push(new daum.maps.LatLng(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
});
polygon.setMap(map);
polygons.push(polygon); //폴리곤 제거하기 위한 배열
// 다각형에 mouseover 이벤트를 등록하고 이벤트가 발생하면 폴리곤의 채움색을 변경합니다
// 지역명을 표시하는 커스텀오버레이를 지도위에 표시합니다
daum.maps.event.addListener(polygon, 'mouseover', function(mouseEvent) {
polygon.setOptions({
fillColor : '#09f'
});
customOverlay.setContent('<div class="area">' + name + '</div>');
customOverlay.setPosition(mouseEvent.latLng);
customOverlay.setMap(map);
});
// 다각형에 mousemove 이벤트를 등록하고 이벤트가 발생하면 커스텀 오버레이의 위치를 변경합니다
daum.maps.event.addListener(polygon, 'mousemove', function(mouseEvent) {
customOverlay.setPosition(mouseEvent.latLng);
});
// 다각형에 mouseout 이벤트를 등록하고 이벤트가 발생하면 폴리곤의 채움색을 원래색으로 변경합니다
// 커스텀 오버레이를 지도에서 제거합니다
daum.maps.event.addListener(polygon, 'mouseout', function() {
polygon.setOptions({
fillColor : '#fff'
});
customOverlay.setMap(null);
});
// 다각형에 click 이벤트를 등록하고 이벤트가 발생하면 해당 지역 확대을 확대합니다.
daum.maps.event.addListener(polygon, 'click', function() {
// 현재 지도 레벨에서 2레벨 확대한 레벨
var level = map.getLevel()-2;
// 지도를 클릭된 폴리곤의 중앙 위치를 기준으로 확대합니다
map.setLevel(level, {anchor: centroid(points), animate: {
duration: 350 //확대 애니메이션 시간
}});
//deletePolygon(polygons); //폴리곤 제거
});
}
$.getJSON(“wonju.geojson”, function(geojson) {
var data = geojson.features; // 데이터를 data 변수에 할당
var coordinates = [];
var name = ‘’;
$.each(data, function(index, val) {
var featureCoordinates = val.geometry.coordinates;
name = val.properties.SIG_KOR_NM;
displayArea(featureCoordinates, name);
});
});
GitHub - jjjayyy/GAZUA 보고 따라해봤는데요 geojson까지는 만들었는데요
버튼을 누르면 경계 도형이 생성되어야 하는데 생성되지 않아요 초보라 문제가 뭔지 모르겠어요