Google 지도 API를 사용한 자바스크립트 지리적 위치 추적

모든 키워드가 완벽하게 포함된 업데이트된 블로그 게시물을 확인하세요.

이 글은 Google Maps JavaScript API와 PubNub를 사용하여 위치 정보 기능을 갖춘 실시간 웹 애플리케이션을 만드는 방법에 대한 4편으로 구성된 시리즈의 마지막 글입니다. 이 튜토리얼에서는 JavaScript와 PubNub를 사용하여 비행 경로를 생성하는 사용자 경험을 안내합니다.

이 모든 것이 어떻게 구현되는지 예시를 보려면 PubNub 웹사이트의 쇼케이스 데모를 확인하세요. 위치 정보 데모로 이동하여 PubNub와 실시간 트래킹을 통합하는 방법을 확인하세요. 데모 이면의 코드를 보려면 깃허브에서 모든 것이 어떻게 작동하는지 확인하세요.

비행 경로란 무엇인가요?

이 튜토리얼에서 구현된 비행 경로는 모바일 디바이스나 웹 브라우저에 있는 지도에서 사용자가 지정한 지점을 통과하는 경로를 동적으로 그릴 수 있는 폴리라인을 의미합니다. 폴리라인은 이동 패턴을 추적하기 위해 HTML5 지리적 위치 API 및 Google 지도 API에 필수적인 요소입니다.

튜토리얼 개요

1, 2, 3부( )에서 JavaScript 환경을 설정하고 지도 마커와 위치 추적에 대해 다룬 사전 요구 사항을 완료했는지 확인하세요.

완료했으면 다음 파트로 넘어가세요.

코드 연습

먼저 지도, 마커 및 폴리라인 좌표 객체를 보유할 let\ 변수 map\, mark\ 및 lineCoords\를 정의해 보겠습니다. 이렇게 하면 PubNub 이벤트가 들어올 때 이를 조정할 수 있습니다. 그 후, 로드 준비가 되면 구글 지도 자바스크립트 API에서 사용할 수 있는 initialize\ 콜백을 정의합니다. YOUR_GOOGLE_MAPS_API_KEY`를 실제 API 키로 바꿔야 합니다.

js let map; let mark; let lineCoords = []; let initialize = function() { map = new google.maps.Map(document.getElementById('map-canvas'), {center:{lat:lat,lng:lng},zoom:12}); mark = new google.maps.Marker({position:{lat:lat, lng:lng}, map:map}); }; window.initialize = initialize;

이제 'redraw' 이벤트 핸들러를 사용하여 geolocation의 `getCurrentPosition()` 메서드를 호출하여 새 위치 정보를 즉시 업데이트합니다.

위도/경도

다음으로, 새로운 위치 변경 이벤트가 즉시 발생할 때마다 호출할 redraw 이벤트 핸들러를 정의합니다. 함수의 첫 번째 부분에서는 위도와 경도를 메시지의 새 값으로 설정합니다. 그런 다음 지도, 마커 및 폴리라인 객체에서 적절한 메서드를 호출하여 위치를 업데이트하고 라인의 끝에 추가하고 지도를 최신으로 업데이트합니다.

js var redraw = function(payload) { lat = payload.message.lat; lng = payload.message.lng; map.setCenter({lat:lat, lng:lng, alt:0}); mark.setPosition({lat:lat, lng:lng, alt:0}); lineCoords.push(new google.maps.LatLng(lat, lng)); var lineCoordinatesPath = new google.maps.Polyline({ path: lineCoords, geodesic: true, strokeColor: '#2E10FF' }); lineCoordinatesPath.setMap(map); };

PubNub 초기화

콜백을 정의한 후에는 iOS, Android, JavaScript, .NET, Java, Ruby, Python, PHP 등과 같은 기술 스택에서 휴대폰, 태블릿, 브라우저, 노트북에서 작동하는 PubNub 실시간 데이터 스트리밍 기능을 초기화합니다.

js const pnChannel = "map3-channel"; const pubnub = new PubNub({ publishKey: 'YOUR_PUB_KEY', subscribeKey: 'YOUR_SUB_KEY' }); pubnub.subscribe({channels: [pnChannel]}); pubnub.addListener({message:redraw});

실시간 채널에서 주제를 게시하고 구독할 수 있는 PubNub의 기능은 효율적인 데이터 스트리밍 기능을 제공합니다.

위도/경도 게시하기

이 간단한 튜토리얼에서는 현재 시간을 기준으로 새 위치를 게시하는 기본 JavaScript 간격 타이머를 설정해 보겠습니다. 500밀리초마다 새로운 위도/경도 객체(북동쪽으로 이동하는 좌표 포함)를 지정된 PubNub 채널에 게시하는 익명 콜백 함수를 호출합니다. 앱에서는 실시간 디바이스 위치 또는 사용자가 보고한 위치에서 위치를 가져올 가능성이 높습니다.

js setInterval(function() { pubnub.publish({channel:pnChannel, message:{lat:window.lat + 0.001, lng:window.lng + 0.01}}); }, 500);

마지막으로, 마지막에 구글 지도 API를 초기화하여 DOM 요소와 자바스크립트 전제 조건이 충족되었는지 확인합니다.

`js

마무리

이 튜토리얼 시리즈를 통해 웹 및 모바일 앱에서 실시간 위치 추적을 위해 Google Maps API와 PubNub가 어떻게 함께 작동하는지 살펴봤습니다. 이는 Uber나 Lyft와 같은 차량 호출 서비스가 차량의 움직임을 실시간으로 보여주는 방식과 유사합니다.