Google 지도 API를 사용한 지리적 위치 추적

이 글은 실시간 지도 및 위치 정보 API를 구축하여 Google 지도 플랫폼과 PubNub을 사용하여 기기를 추적하는 방법에 대한 4부 시리즈 중 3부입니다.

지리적 위치 추적이란 무엇인가요?

이 초보자 튜토리얼에서는 2부에서 구축한 Google 지도 JavaScript API 지도 마커를 실시간 위치 추적 기능으로 실시간 업데이트하는 앱을 구축해 보겠습니다. HTML5 지리적 위치 API를 사용하여 기기에서 사용자의 위치를 수집하고 PubNub 실시간 메시징( 실시간 위치 추적)을 사용하여 위치 변경 사항(기기 자체 보고 위치 기준)을 지도에 스트리밍 및 게시할 것입니다 !

튜토리얼 개요

이 예제의 코드는 CodePen에서 확인할 수 있습니다.

데모를 사용하려면 Google 클라우드 플랫폼에서 자체 API 키를 지정해야 한다는 점에 유의하세요.

아직 하지 않았다면 먼저 1부와 2부에서 다룬 몇 가지 전제 조건을 처리해야 하며, 여기서 JavaScript 환경을 설정하고 지도 마커를 시작해야 합니다.

이제 모든 관련 구성 설정과 지도 마커가 준비되었으므로 웹 또는 모바일 웹 맵의 위치 데이터를 수집하고 게시하는 작업을 시작하겠습니다.

코드 연습

애플리케이션용 DIV와 이전 튜토리얼에서 이미 설정한 지도를 담을 DIV를 준비했습니다. 이제 HTML5 위치 API를 사용하여 실시간으로 위치를 업데이트할 차례입니다.

HTML5 위치 API

한 번에 한 단계씩 살펴봅시다. 먼저 샌프란시스코 인근의 초기 위도와 경도를 설정합니다. 그런 다음 HTML5 위치 API를 사용하여 디바이스 위치를 가져오고 브라우저 위치 변수를 업데이트하는 함수를 만듭니다. 주기적으로 디바이스 위치를 가져오는 간격 타이머를 설정합니다. 편의를 위해 위도와 경도를 위도와 경도 값으로 포함하는 자바스크립트 객체를 반환합니다.

다음 자바스크립트 코드 스니펫은 사용자의 현재 위치를 가져오는 방법을 보여줍니다:

<script>
window.lat = 37.7850;
window.lng = -122.4383;
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(updatePosition);
    }
    return null;
};
function updatePosition(position) {
  if (position) {
    window.lat = position.coords.latitude;
    window.lng = position.coords.longitude;
  }
}
setInterval(function(){updatePosition(getLocation());}, 10000);
function currentLocation() {
  return {lat:window.lat, lng:window.lng};
};

자, 이제 HTML5 위치 관련 내용을 정리했으니 이제 중요한 내용으로 넘어가 보겠습니다.

실시간 위치

PubNub 이벤트가 들어올 때 즉시 조작할 수 있도록 맵과 마커 객체를 저장할 맵 및 마크 변수를 정의합니다. 그런 다음 Google Maps JavaScript API가 로드될 준비가 되면 호출할 수 있는 초기화 콜백을 정의하고 창 객체의 멤버가 되어 API에서 액세스할 수 있도록 합니다.

var map;
var mark;
var 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;

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

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});
};

이제 콜백을 정의했으므로 PubNub 실시간 데이터 스트리밍 기능을 초기화할 수 있도록 필요한 모든 메커니즘을 갖추었습니다. 먼저, 새로운 위치 업데이트가 도착할 채널 이름을 결정합니다. 그런 다음, 전제 조건의 1단계에서 설정한 게시 및 구독 키를 사용하여 PubNub 라이브러리를 초기화합니다.

마지막으로 PubNub 라이브러리에 적절한 채널을 구독하도록 지시하고 수신 이벤트에 대한 리스너로 다시 그리기 함수를 첨부합니다. 이러한 이벤트는 어떻게 생성되나요? 계속 지켜봐 주세요!

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

위도/경도 게시하기

이 간단한 튜토리얼에서는 현재 시간을 기준으로 새 위치를 게시하는 기본 자바스크립트 간격 타이머를 설정해 보겠습니다. 5000밀리초마다 새로운 위도/경도 객체(currentLocation() 호출로 생성된)를 지정된 PubNub 채널에 게시하는 익명 콜백 함수를 호출합니다.

setInterval(function() {
  pubnub.publish({channel:pnChannel, message:currentLocation()});
}, 5000);
</script>

마지막으로 마지막에 Google Maps API를 초기화하여 DOM 요소와 JavaScript 전제 조건이 충족되었는지 확인합니다.

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOUR_GOOGLE_MAPS_API_KEY&callback=initialize"></script>
  </body>
</html>

다음 단계

75%의 작업이 완료되었으니 이제 파트 4의 마지막 기능인 비행 경로를 추가할 차례입니다! 비행 경로는 지도 마커 뒤에 흔적을 그려서 기기가 어떤 경로로 이동했는지 보여줍니다.

내용

지리적 위치 추적이란?튜토리얼 개요코드 연습HTML5 위치 앱실시간 위치 게시위도/경도 게시다음 단계

펍넙이 어떤 도움을 줄 수 있나요?

이 문서는 원래 PubNub.com에 게시되었습니다.

저희 플랫폼은 개발자가 웹 앱, 모바일 앱 및 IoT 디바이스를 위한 실시간 인터랙티브를 구축, 제공 및 관리할 수 있도록 지원합니다.

저희 플랫폼의 기반은 업계에서 가장 크고 확장성이 뛰어난 실시간 에지 메시징 네트워크입니다. 전 세계 15개 이상의 PoP가 월간 8억 명의 활성 사용자를 지원하고 99.999%의 안정성을 제공하므로 중단, 동시 접속자 수 제한 또는 트래픽 폭증으로 인한 지연 문제를 걱정할 필요가 없습니다.