본문 바로가기

GPS2

MapLibre - #4 내 위치 찾기 모바일 지도 서비스에 기본적으로 요구되는 기능은 '내 위치 찾기'일 것입니다. MapLibre도 관련 기능을 제공하고 있습니다. 지난 MapLibre 글들에 이어지는 내용으로 설명드리겠습니다. 작성 과정을 처음부터 보시려면 지난 1~3편의 글을 참고하시기 바랍니다. 에뮬레이터 실행화면을 보여드리면 지도화면에 내 위치와 기기의 방향이 표시됩니다. 이렇게 동작하기 위해 필요한 주요 코드를 설명드리겠습니다. 우선 기기의 위치 권한을 요청해서 획득합니다. 이후 OmMapReadyCallback 함수(onMapReady)에서 맵 스타일에 원하는 레이어(주제도)를 추가하고 내 위치 표시 컴포넌트를 활성화하는 순서입니다(나머지 소스에 대한 설명은 주석을 참고하세요). 오늘은 설명할 것이 많지 않네요. 거의 공식처럼 .. 2022. 2. 10.
leaflet - #5 내 위치 찾기 이번 글에서는 지도에서 내 위치를 표시하는 기능을 만들어 보겠습니다. leaflet은 모바일 친화적인 지도 라이브러리라고 소개되어 있는데, 정말 손쉽게 내 위치를 확인하고 지도에 표시할 수 있게 만들어 놨습니다. 물론 PC에서도 내 위치 표시는 됩니다. 웹 표준이 계속해서 발전하면서 Location에 대한 표준도 정리되었습니다. leaflet은 이러한 웹표준 API를 몰라도 손쉽게 지도상에 위치를 표시할 수 있습니다. See the Pen leaflet tutorial #5 by yogin (@yogin) on CodePen. 이 코드를 실행하면 아래와 같이 표시됩니다. 자바스크립트 코드는 아래와 같습니다. var hanRiverPos = [37.5118, 126.9745]; var map = L.map.. 2022. 1. 28.