웹개발 프로젝트 : (3) 지도 위치 바꾸기

https://lcw126.tistory.com/192

HTML+Java script (기초) geolocation Google Map Api 이용 (웹페이지에서 지도 보여주기)

제일 설명이 잘 되어있는 블로그!

 

문제 & 해결

너무 왔다갔다 하면서 코딩하느라 정확히 기억은 안나지만....

• 읽어온 공항 정보의 longitude, latitude가 텍스트여서 위치정보로의 변환이 안되는 문제

해결: 구글에 'javascript string to number' 검색.

위치정보라 소숫점까지 읽어왔어야 했음.

parseInt(): 소숫점은 안읽어옴

Number(): 왠지 모르겠는데 안됨...

parseFloat(): 왠지 모르겠는데 됨...

 

• 읽어온 공항 정보를 구글맵상의 위치정보로 변환이 안됐음

오류 코드가 있었는데 대충 못찾겠다는 오류. 문자여서 못찾나 했는데 바꾼 후에도 여전히 못찾음.

 

해결:

let airport_map = new google.maps.LatLng(lati_num, long_num);

 

> 이 코드가 단순 숫자를 구글맵상의 위치정보로 변환해주는 코드였음. 필수로 들어갔어야 했는데 빼먹었다...

 

• 맵의 그림이 바뀌지를 않음

해결: 코드를 잘 뜯어보고 이해해서 성공할 수 있었음 ㅠㅠ

//공항의 위치 정보를 구글맵상의 위치정보로 변환해주고
let airport_map = new google.maps.LatLng(lati_num, long_num);

//처음 iniMap 함수로 만들어준 기본 Map을 ID로 부른 다음,
//이 map의 center값, zoom값 등을 바꿔주면
//map의 그림이 바뀌는 거였음
let map = new google.maps.Map(document.getElementById("map"), {
            center: airport_map,
            zoom: 12
                   })

결과물

'공항 찾기' 누르면 지도에 해당 공항이 뿅-뜨고, 마커가 추가된다

얏호~!

 

사실 마커들을 뿅뿅 추가하고 싶었는데 그건 잘 안되어서....

나-중에 한번 시도해보기로 하고

 

Next step

생각해보니 공항명을 검색하면 그걸 DB에 저장해서 끌고오는게 넘 비효율적인 것 같았다...?

일단 세계의 공항 정보들을 크롤링해서 DB에 다 저장해놓은 다음,

웹페이지에서는

1) 공항 검색 > 2) DB 상에서 일치하는 공항을 찾기 > 3) 해당 정보만 GET 해서 클라이언트에 넘겨주기

 

하면 되는 거 아닌가...?

 

그래서 생각해 본 다음 스텝!

1. 공항 DB 만들기

1) 국토교통부의 세계공항코드 JSON 파일을 읽어온다

2) for 문 돌려서 하나씩 세계공항코드를 받아와, 이것을 api 사이트에서 검색하게 한다

3) api 사이트에 검색해서 나온 정보들을 DB에 저장한다
> 2/22 기준, 여기까지 했는데... api 사이트 접속을 너무 많이 해서 접속 오류 뜨는 듯...? ㅜㅜ

 

 

2. 웹페이지 구축하기

1) 검색한 공항을 DB에서 GET하여

2) 클라이언트에 넘겨주고, 정보 표출해준다