2016년 11월 11일 금요일

0. 구글 지도 API로 가까운 매장 찾기 구현

0. 회사에서 모바일 환경에서 매장으로 길찾기를 하게 해달라고 함.

1. 구글, 네이버, 다음 3개의 지도 서비스 검토

2. 일단 네이버, 다음은 제휴를 맺은 업체만 길찾기를 제공함.

   제휴가 없으면.. 그냥 지도에 점찍기 정도만 가능. 기타 기능은 서술 생략하겠음.

3. 구글은 길찾기를 무료로 제공하나!!!! 찾기 모드에서

   걷기, 자전거, 자가용... 모두!!!! 정상 작동하지 않는다..

   오직 대중교통 안내만 가능... 어쩔수 없이 이걸로 구현

   그나마 천만 다행인게 대중교통 안내에 도보 정보도 표시가 된다.

4. 기본 예제들은 구글 지도 API에서 제공

5. 개발한 부분은 현재 위치에서 각 매장들간의 거리를 측정하여

   데이터를 미리 갖고 있다가, 가까운 매장 검색 버튼을 눌렀을 때

   지도에 표기만 하면 됨.

6. 지도 API의 사용의 기본은 HTML5의 navigator.geolocation 를 사용하여

   접속 기기의 위도와 경도를 받아오는 것 부터 시작하면 된다.

7. 지도 그리는건 알아서들 하시고(https://developers.google.com/maps/web/?hl=ko)

   거리 측정에 대해서만 기술함.

8. 일단 길 찾기 class는 다음과 같다. 해당 class의 API와 예제를 참고하면

   길찾기를 간단히 구현 할 수 있다.

    var directionsDisplay = new google.maps.DirectionsRenderer;
    var directionsService = new google.maps.DirectionsService;

9. 가까운 지점의 검색은 distancematrix class를 사용한다.

   이 부분은 xml 또는 json 형태의 데이터를 수신하는 형식으로 사용 가능하다.

   xml은 parsing 하기 귀찮으므로 간단한 json 형태로 구현 하기로 했다.

10. 그런데.. 이 거리 구하는게 google에 실시간으로 통신을 해야 해서

   cross-domain 문제가 발생한다. 물론 jquery의 jsonp 형태의 통신을 하면

   일단 수신은 가능하나! 내 경우에 Unexpected Exception이 발생.

11. 이래저래 구글링을 해보았고, 내린 결론은

    수신되는 json 형식에 문제가 있다고 판단됨.

    뭐 엔터키를 치환해주면 된다는 글도 봤으나. 전부 안됨.

12. 방향 선회하여 json 통신으로 다시 개발.

13. 회사 개발 환경은 IIS 7.5 + ASP 환경으로 ASP에서 xml 통신을 사용하여

     위치 검색 결과를 수신하여 다시 웹페이지에서 json으로 받는 식으로 우회 함.

14. 개인적으로 cross-domain 문제 해결 할 시에 jquery로 다른 domain을

    호출하는 것 보다, Server에서 호출하면 쉽게 해결이 된다고 판단됨.

15. 여튼 구현 성공!


댓글 없음:

댓글 쓰기

BE Band (비밴드) - 2024년 03월 02일 잠실새내 락앤롤욱스 공연

나의 10~20대를 보낸 잠실에서의 공연.. 오랜만에 가보니.. 여기가.. 마눌님과 자주 가던 영화관이었는데... 여긴 뭐가 있었는데... 란 추억도 떠올리며 기분좋게 감.​ 공연장은 좀 협소한 편이었고, 인천의 쥐똥나무 보다는 약간 크고... 인천 ...