[ 파이널 프로젝트 ] 스터디 모집 화면 구현하기 (SELECT박스 / 위치 조회) ①
🔮 출력 화면 🤍 JSP 코드 스터디 같이 해요🤔 나에게 맞는 프로젝트나 스터디/ 모임을 찾아 참여하세요! 모집글 작성하기 역할 프론트앤드 백엔드 디자인 기획 기타 목적 포트폴리오/직무역량
jnaa.tistory.com
스터디 모집을 위해 내가 원하는 구에서 스터디를 같이 진행했으면 좋겠다는 생각으로 인해 위치를 확인하는 것을 변화를 주기로 했다! 근데..... 어떻게 전체 구를 보여줘야하지...?
결과는 해냈다.
정말 하루종일 이것만 했고 어떻게 하는지몰라서 블로그를 몇개를 본지 모르겠다.
심지어 개발자인 동생한테 엄청 멘탈케어를 받으면서 완성한 나의 화면....😥
하면서 정말 신기한 QGIS도 다운 받아서 사용해봤다.
일단 이것을 하려면, 다음 맵 API를 들어가서 '다각형 이벤트 등록하기'를 이용하면 되는데, 이전 블로그에도 말했듯
전체 25개에 대한 좌표가 없다....
그렇다면 나는 무엇을 해야하는가? 티스토리를 엄청 찾아본다.
도움 받았던 블로그는 아래 주소를 남기겠다.
또한 최신 행정구역데이터인 SHP파일 받을 수 있는 블로그 주소도 같이 남기겠다.
아까 말했던 QGIS 를 잠깐 설명해보자면,
🤔 QGIS 란 ?
QGIS는 데이터 뷰, 편집, 분석을 제공하는
크로스 플랫폼 자유-오픈 소스 데스크톱 지리 정보 체계(GIS) 응용 프로그램이다.
좀 더 찾아보니 지리정보를 분석하는 사람도 있다고 하는데 나는 일단 행정구역에 대한 좌표를 얻기 위해서 사용했다.
실제 혼자 사용하면서 봤던 화면이다...진짜 이거하는데 주변에서 뭐하는지 하도 물어봐서 부끄러웠음...
💻 카카오 맵 API 값 변환
// 2) getJSON 메소드를 이용해 JSON 파일을 파싱함
$.getJSON("/resources/seoul_gson.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
QGIS 를 이용해서 서울에 좌표를 가져왔다면, 구글맵 API 좌표값과 맞게 파싱해줘야한다.
많은 블로그를 찾아봤는데 되게 소스만 던져준 느낌이라서 어떻게 파일을 넣어야지 매우 고민을 하고 머리가 너무 아팠다.
조금의 팁을 작성해보자면, 좌표를 가져와서 작성한 위치에 맞게 파일을 넣어야한다.
또한 좌표값이 파싱하는 과정에서 변수값이 일치하는지 확인해야한다.
/resources/seoul_gson.json
💻 카카오 맵 API 코드
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
level: 9 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption),
customOverlay = new kakao.maps.CustomOverlay({}),
infowindow = new kakao.maps.InfoWindow({removable: true});
// 지도에 영역데이터를 폴리곤으로 표시합니다
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" name="location">' + area.name + '</div>' +
'</div>';
infowindow.setContent(content);
infowindow.setPosition(mouseEvent.latLng);
infowindow.setMap(map);
const location= document.getElementsByClassName('title')[0].innerHTML
console.log(location)
const mapVal = document.getElementById("mapVal");
mapVal.value = location;
});
그리고 내가 QGIS를 이용해서 받았던 구 좌표를 계속 오류가 났다....
그거 다른 블로그에서 찾느라고 진짜 한참 고생했었던... 그래도 해냈다!
그렇다면, 이제 열심히 만들어낸 내용을 가지고 스터디 모집글 삽입을 해볼까...하하하 신나😎
🤍 도움 받았던 블로그 🤍
다음 맵 API(카카오 맵) 행정구역 폴리곤(Polygon)으로 구분하기 & 클릭 확대 이벤트
행정구역을 폴리곤(Polygon)으로 구분해보자(with 카카오 맵 or 다음 맵) 다음 부동산 처럼 행정구역을 구분해서 지역 별로 길찾기를 구현하고 싶었다. 다음 맵 API에 들어가보니 '다각형 이벤트 등록
jjjayyy.tistory.com
대한민국 최신 행정구역(SHP) 다운로드 – GIS Developer
www.gisdeveloper.co.kr
1.대한민국 행정구역 데이터 SHP 파일 얻기
* 아래의 사이트에서는 대한민국 최신 행정구역 데이터를 제공하고 있다. 시도 단위, 시군구 단위, 읍면동 단위, 리 단위 등을 각각 제공한다. http://www.gisdeveloper.co.kr/?p=2332 * 얻은 파일을 열어 확
ldgeao99-developer.tistory.com