본문 바로가기

우리동네 교통사고 다발지역

[HTML5] 웹에서 현재 위치 정보 얻기 - geolocation 우리동네 교통사고 다발지역 서비스는 맵 기반 서비스다보니, 어딘가를 지나가다가 우연히 이 서비스를 사용하고 있다면 현재 위치와 가까운 곳에 교통사고 다발지역이 있을지 궁금해 했으면 하는 바람으로.. 서비스에 현재 위치로 이동하는 기능을 추가했다. 검정 과녘 같이 생긴 아이콘을 누르면 현재 위치로 이동한다. 해당 기능을 위해 HTML5 API인 geolocation을 이용하면 쉽게 구현이 가능하다. $('#myLocation').on('click', function() { navigator.geolocation.getCurrentPosition(function(pos) { latLng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);.. 더보기
구글 플레이(Google Play) 앱 등록 거절 지난 2월 17일 구글플레이(Google Play)에 등록 요청했던 '우리동네 교통사고 다발지역' 앱이 https://traffic-accident.netlify.com/ 3일만에 등록 거절됐다고 메일로 회신이 왔다. 사유는 WebView 및 제휴사 스팸 정책 위반이라고 한다. 해당 앱이 어떤 웹뷰 및 제휴사 스팸 정책을 위반했을까.. 상세 내용을 보면 웹사이트 소유자 또는 관리자의 허가없이 웹사이트로 제휴사 트래픽을 유도하거나 웹사이트의 WebView를 제공하는 것이 주된 목적인 앱은 허용되지 않습니다. 아무래도 '우리동네 교통사고 다발지역' 앱이 구글맵을 전체 페이지 영역을 차지하고 이를 웹뷰로 제공해서 문제가 되는 것 같다. 예전에는 IOS앱 심사에 비해 안드로이드 앱 심사는 대부분 통과된다고 했.. 더보기
[3] 우리동네 교통사고 다발지역 - 전국편 v2.0 https://traffic-accident.netlify.com 우리동네 교통사고 다발지역정보 - 전국편 v2.0 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, me traffic-accident.netlify.com 후딱 전국 지원 가능한 서비스 완성! 서울특별시 외 16개 광역시 자치시/도, 도별 .. 더보기
[구름IDE] 파이썬(python) 개발 환경 우리동네 교통사고 다발지역 - 서울편 v1.0 서비스는 서울특별시에 한해서 총 25개구에 대해 7개 API의 정보만 제공하면 되었기 때문에 프로토타입을 만드는 셈치고 무식하게 하드코딩된 시구 코드를 가지고 7개 API를 직접 호출한 결과를 저장해 놓고 구현했다. 지자체별사고 다발지역 API 하나에 대해서만 할 때만해도 이정도쯤이야 직접 호출해 보는게 빨라.. 이것만 하고 다른 건 추가 안 할거야...이런 마음으로 시작해서 결과를 저장하기 위해 직접 호출하는 것쯤이야 인내할 만했는데 API의 종류가 증가하고 서울특별시 외에 모든 시의 모든 군/구에 대해서 막상 지원하려다보니 역시나 자동화가 필요했다. 이럴 땐 역시 파이썬이지. 새로 산 맥북에어에 기본 설치되어 있는 파이썬을 확인해보니 is not reco.. 더보기
[GoogleMap] 위치 검색 자동완성 우리동네 교통사고 다발지역 서비스를 위해서는 일단 위치 검색을 할 수 있어야 한다. 제일 먼저 생각나는 것이 서울이라고 가정하면 구단위를 선택하고 그 다음에 동단위를 선택해야 하는데 그렇게 검색한 결과의 위도/경도 정보를 알 수 있어야 구글맵에 마커를 보여줄텐데 그 값을 어떻게 알 수 있을까.. 또 각 구단위, 동단위를 선택하려면 select box로 구현을 해서 비동기로 값이 바뀔 때마다 이벤트 핸들링을 해줘야 하나... 막 이런 생각이 먼저 들었는데, 다행히도 구글맵에는 위치 자동완성 해주는 컴포넌트를 제공해 주고 있다. text input에 내가 입력하고 싶은 위치 정보를 넣으면 아래 이미지처럼 자동완성된 가능목록 중에서 선택할 수 있다. 이 기능을 위해 구글맵의 기본 라이브러리를 사용하면 되나 그.. 더보기
[GoogleMap] 구역을 표시해보자 - Polygon 교통사고 다발지역 API의 응답값이 정확한 사고지점을 알려주는 것이 아니라, 사고가 많이 발생하는 구역의 좌표와 그 중앙값의 위도/경도값을 제공해 주기 때문에 이런 정보를 맵에 보여주기 위해서는 아래와 같이 해당 구역을 표시해 줄 수 있는 기능이 필요하다. Polygon이라고 하는데 아래와 같이 원형태로 보여 주려면 엄청 많은 좌표값이 필요하다. 교통사고 다발지역 API에서 제공되는 샘플 좌표값은 이렇다. [126.97851642,37.57485821],[126.97849053,37.57464986],[126.97841385,37.57444952],[126.97828933,37.57426488],[126.97812175,37.57410305],[126.97791756,37.57397023],[126.97.. 더보기
[GoogleMap] 구글맵에 마커(Marker)를 추가해 보자 (2) [GoogleMap] 구글맵에 마커(Marker)를 추가해 보자 (1)에서 기본적인 마커 사용법에 대해서 알아 보았는데, 우리동네 교통사고 다발지역 서비스를 위해서는 아직 부족하다. 교통사고 다발지역이 한 곳이라면 충분하겠지만 아쉽게도 그렇지가 않다. 그래서 하나의 맵에 마커를 여러 개를 보여줘야 하며, 그 사고지역의 교통사고 상세 정보를 보여주기 위해서는 개별 마커를 클릭했을 때 팝업을 띄울 수 있으면 좋겠다. 여러개 마커 보여주기 마커를 생성하는 방법이 Maker 객체를 생성하고 그 객체를 Map에 전달하는 방식이 아니고 그 반대로 Map을 먼저 생성한 다음에 Maker객체 생성할 때 Map 객체를 전달하는 방식이기 때문에, 여러개 마커를 보여주기 위해서는 마찬가지로 Map객체를 먼저 생성하고 필요한.. 더보기
[GoogleMap] 구글맵에 마커(Marker)를 추가해 보자 (1) 맵에는 역시 마커가 있어야 제 맛. 마커를 추가해 보자 goole.maps.Marker 객체 하나만 생성해 주면 아래와 같이 빨간 물방울을 거꾸로 한 모양의 기본 아이콘이 지정된 위치에 표시가 된다. 위에 코드를 보기 전까지는 Maker객체를 먼저 생성하고 해당 객체를 Map 객체를 생성할 때 넣어 주겠거니 생각했었는데, 그 부분이 생각했던 것과는 달랐던 것 같다. 어쨌든 잘 나온다. 기본 아이콘은 좀 식상해 보인다. 다른 이미지로 바꿔보자. 이미지 경로를 가지고 있는 google.maps.MarkerImage 객체만 생성해서 Maker 객체 생성 시 icon 속성에 넣어 주기만 하면 된다. 그럼 이렇게 잘 나온다. 역시 Maker에 대한 설명은 구글 문서에 잘 나와 있다. https://develope.. 더보기

티스토리툴바