UroA 개발 블로그

gmaps -> angularjs-google-maps 라이브러리 변경 기존의 프로젝트를 angularjs로 변경하여 다시 진행함에 따라 사용하던 gmaps(javascript Google map library) 라이브러리를 angularjs-google-maps 라이브러리로 변경하였다. angularjs-google-maps github -> https://github.com/allenhwkim/angularjs-google-maps 위와 같이 library의 기능들이 예제로 주어지고 있으며, Plunker로 확인 할수도 있다. 프로토타입의 프로젝트에서는 (1) custom-marker-ng-repeat.html 과 (2) polyline-simple.html 를 사용하였다.

프로젝트 AngularJS 로 변경 회사의 앱이 AngularJS를 이용한 Ionic으로 개발되어있다. 그래서 조금 더 도움이 될 수 있도록 진행하고 있던 Q-Map 프로젝트를 AngualrJS 로 변경하기로 했다. Webstorm에서 AngularJS 프로젝트를 생성하였다.

gmaps 라이브러리 사용하기https://github.com/hpneo/gmaps gmaps 라이브러리는 Google Maps을 간편하게 사용할 수 있도록 도와준다. Github에서 여러가지 example과 documentation을 볼 수 있다.

wgs84 deg/min/sec -> wgs84 decimal 변경하기 먼저 좌표와 관련된 개념은 http://blog.daum.net/_blog/BlogTypeView.do?blogid=04ebo&articleno=924 를 참고하자. Load - Image 라이브러리를 통해 추출한 Exif의 gps tag에는 '세계측지계(WGS84)의 경위도 좌표계, 도/분/초' 형식의 값이 들어있다. 이 값으로 Google Map의 해당 좌표에 Marker를 표시하기 위해서는 먼저 '세계측지계(WGS84)의 경위도 좌표계, 도/분/초' 형식의 값을 decimal 형식으로 변경해야 한다. 추출한 Exif 값을 바탕으로 아래의 코드를 통해 wgs84 decimal 값을 얻을 수 있다. var latRef = GPSLa..

Javascript - Load - Image 라이브러리 사용하기 사진의 meta data를 사용하기 위해서 외부 라이브러리를 사용하기로 했다. https://github.com/blueimp/JavaScript-Load-Image 에서 제공되는 Load - Image 라이브러리는 이미지 파일을 불러오고 변형할때 사용된다.이미지는 File 또는 URL을 통해 로드할 수 있으며, 라이브러리에서 제공되는 method를 통해 이미지의 Exif tags 를 추출할 수 있다. Exif tag 란? 교환 이미지 파일 형식 (Exif; EXchangable Image File format)은 디지털 카메라에서 이용되는 이미지 파일 포맷이다. 이 데이터는 JPEG, TIFF 6.0과 RIFF, WAV 파일 포맷에서 이..

Google Map 사용하기 https://developers.google.com/maps/documentation/javascript/?hl=ko 사이트를 통해 Google Map 을 시작할 수 있습니다. 프로젝트 생성 & API키 받기 먼저 Google Map을 사용하고자 하는 프로젝트를 생성해야합니다. Google 계정을 통해 로그인 후 '키 가져오기' 버튼을 클릭하여 프로젝트를 생성 후 아래의 순서로 API Key를 할당 받습니다. Google Map 사용하기 이제 할당받은 API Key 를 통해 다음과 같이 Google Map 을 사용할 수 있습니다. (YOUR_API_KEY에 본인이 할당받은 Key 사용)(https://developers.google.com/maps/documentation/..