지역 필터 기능 PR 등록 하기
PR (Pull Request)를 등록하기전 작업자가 작성한 이슈번호를#숫자형식으로 작성하여merge를 하게 되면 이슈가close되게 됩니다.
merge는 내일 팀회의 하고 할 예정 입니다.
공공 데이터 오픈 API 위도 경도
- 서울, 경기도 지역의 동물병원 현황 공공 데이터 오픈 API를 활용 합니다.
- 추가로 네이버 지도 API를 사용해 동물병원의 위도와 경도를 활용하여 지도에 마커를 찍을 생각 이며 구상 중입니다.
- 경기도 동물병원 오픈
API는 위도와 경도를 제공하는 반면에 서울 동물병원 오픈API는x좌표와y좌표를 제공합니다.... ⬅ 이 부분에서 시간을 많이 할애 하였습니다.
(x좌표,y좌표로 표현된 값을 위도와 경도로 바꿔야 했기 때문)
-
경기도 동물병원 데이터 (위도와 경도를 제공)
-
서울 동물병원 데이터 (
X좌표와Y좌표를 제공)
x 좌표와 y 좌표를 geotools 라이브러리를 활용해 위도와 경도로 전환 하려고 하였습니다.
geotools 라이브러리를 추가합니다.
하지만 아래의 의존성만 추가하게 된다면 refresh 할때 깨지게 됩니다.
dependencies {
// 다른 의존성들..
implementation group: 'org.geotools', name: 'gt-epsg-hsql', version: '22.1'
implementation group: 'org.geotools', name: 'gt-referencing', version: '22.1'
implementation group: 'org.geotools', name: 'gt-main', version: '22.1'
}repositories 에서도
maven { url "https://repo.osgeo.org/repository/release/"} 을 추가해줘야 합니다.
repositories {
maven { url "https://repo.osgeo.org/repository/release/"}
mavenCentral()
}의존성을 추가후 위의 서울 동물병원 데이터 사진의
(X 좌표 : 192081.391357898 Y 좌표 : 445002.688462087) 이며
주소의 위도와 경도를 찾아보면
(위도 : 37.487142399999875, 경도 : 126.98650865393525) 가 나오게 됩니다.
하지만 테스트 코드를 작성하여 실행 해보면, 해당 위도와 경도에 대한
X좌표와Y좌표가 다른것을 확인했습니다.
🙏 그럼으로 이 딜레마를 해결해야 될것같습니다.
- 정상적으로 운영중인 동물병원의 위도와 경도를 다 알아보며,
html에 하드코딩을 할것인지 고민 해봐야 될 것 같습니다.
고민해야할 점
- 프론트엔드 단이라 어색하고 어렵긴하다....
- 아래 코드와 같이 동물병원에 해당하는 위도와 경도를 다 작성해줘야 하는지 고민,
- 반복문과 같은 더 좋은 방법을 통해 해결할수 있는지 고민
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>지도에 마커 표시하기</title>
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=발급한 클라이언트ID"></script>
</head>
<body>
<div id="map" style="width:100%;height:400px;"></div>
<script>
var coordinates = [
{ x: 37.2907647608, y: 127.0169027975 },
{ x: 37.2960022438, y: 126.9932883543 },
{ x: 37.2726844537, y: 127.0020620341 },
{ x: 37.2671339618, y: 127.0312759294 },
{ x: 37.2549900151, y: 127.0217209274 },
{ x: 37.2627666707, y: 127.0301301050 },
{ x: 37.2556716920, y: 127.0390489745 },
{ x: 37.2934229676, y: 127.0255957925 },
{ x: 37.2889768749, y: 127.0009393355 },
{ x: 37.2900970632, y: 126.9846860525 },
{ x: 37.2694321506, y: 126.9794131067 },
{ x: 37.2452333120, y: 127.0676726381 },
{ x: 37.2786037752, y: 127.0323102715 },
{ x: 37.2753571102, y: 126.9759658523 },
{ x: 37.2549662381, y: 127.1057885286 },
{ x: 37.3168060655, y: 127.0682562124 },
{ x: 37.3154794545, y: 127.0752947852 },
{ x: 37.3875161607, y: 127.1142231489 },
// 추가적인 위도와 경도
];
var map = new naver.maps.Map('map', {
center: new naver.maps.LatLng(coordinates[0].x, coordinates[0].y),
zoom: 15
});
for (var i = 0; i < coordinates.length; i++) {
var marker = new naver.maps.Marker({
position: new naver.maps.LatLng(coordinates[i].x, coordinates[i].y),
map: map
});
}
</script>
</body>
</html>
- 경기도 동물병원의 위도와 경도를 활용 했습니다.
- 네이버 지도 플랫폼 에서 제공해주는 마커 형식에 위도와 경도를 작성하여 사용하면 사진과 같이 마커가 찍히게 됩니다.
