PubNub Developer Relations이 글은 JavaScript Google Maps API와 PubNub를 사용하여 웹 및 모바일 웹용 위치 추적 기능이 있는 실시간 지도를 구축하는 4부작 시리즈 중 2부입니다.
지도 마커란 무엇인가요?
이 튜토리얼에서는 웹 또는 모바일 웹 지도에 지도 마커를 추가해 보겠습니다. 지도 마커는 지도에서 사용자 또는 디바이스의 위치를 식별하는 데 사용됩니다. 기능을 시작하기 위해 맵에 하나의 맵 마커를 배치하고 그 위치를 무작위로 업데이트하겠습니다. 다음 부분에서는 실제 디바이스 위치를 기반으로 맵 마커를 이동해 보겠습니다.
튜토리얼 개요
아직 시작하지 않았다면 먼저 1부에서 다룬 몇 가지 전제 조건을 처리해야 합니다. 여기에는 다음이 포함됩니다:
- 게시 및 구독 키를 포함한 PubNub 애플리케이션 만들기
- Google 지도 API 프로젝트 및 자격 증명 만들기
이 예제의 코드는 여기에서 코드펜으로 사용할 수 있습니다.
코드 연습
이 코드 구조는 과거에 HTML5 애플리케이션으로 작업해 본 적이 있다면 익숙할 것입니다. 일반 HTML5 애플리케이션으로 시작하여 실시간 통신을 위한 PubNub 라이브러리와 최소한의 스타일링을 위한 부트스트랩 CSS를 포함합니다.
<!doctype html>
<html>
<head>
<title>Google Maps Tutorial</title>
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.19.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
</head>
<body>
Google Maps API가 어디에 포함되어 있는지 궁금하다면 HTML5 페이지 맨 끝에 있습니다. 이렇게 하면 지도 코드에서 전체 DOM을 사용할 수 있습니다.
다음으로 애플리케이션을 위한 DIV를 만들고 그 안에 지도를 담을 DIV를 만듭니다. 여기서는 너비와 높이에 인라인 CSS를 사용합니다. 실제 프로덕션급 애플리케이션에서는 이 스타일을 다른 곳에서 정의할 가능성이 높습니다. 이것이 바로 지도 캔버스 DOM 요소를 정의한 후 Google 지도 스크립트를 포함하고자 할 때 이야기했던 것입니다.
<div class="container">
<h1>PubNub Google Maps Tutorial - Live Map Marker</h1>
<div id="map-canvas" style="width:600px;height:400px"></div>
</div>
이제 처리해야 할 자바스크립트가 많이 있습니다. 한 번에 한 단계씩 살펴봅시다.
위도/경도
먼저 샌프란시스코 인근의 초기 위도와 경도를 설정합니다. 그런 다음 현재 시간을 기준으로 원의 한 점을 제공하는 함수를 정의합니다. 반경(위도/경도 단위)을 정의합니다. 시간(에포크 초)을 입력합니다.
삼각함수의 마법을 통해 원의 점은 x = "초기 경도에 입력값의 코사인을 더한 값에 반지름을 곱한 값", y = "초기 위도에 입력값의 사인을 더한 값에 반지름을 곱한 값"으로 주어집니다. 편의를 위해 위도와 경도를 위도와 경도 값으로 포함하는 JavaScript 객체를 반환합니다.
<script>
window.lat = 37.7850;
window.lng = -122.4383;
function circlePoint(time) {
var radius = 0.01;
var x = Math.cos(time) * radius;
var y = Math.sin(time) * radius;
return {lat:window.lat + y, lng:window.lng + x};
};
맵 마커 위치 이동
이제 수학적 계산을 마쳤으니 이제 중요한 내용을 살펴보겠습니다. 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에 연결하기
이제 콜백을 정의했으므로 PubNub 실시간 데이터 스트리밍 기능을 초기화할 수 있도록 필요한 모든 메커니즘을 갖추었습니다. 먼저, 새로운 위치 업데이트가 도착할 채널 이름을 결정합니다. 그런 다음 전제 조건의 1단계에서 설정한 게시 및 구독 키를 사용하여 PubNub 라이브러리를 초기화합니다.
마지막으로 PubNub 라이브러리에 적절한 채널을 구독하도록 지시하고 수신 이벤트에 대한 리스너로 다시 그리기 함수를 첨부합니다. 이러한 이벤트는 어떻게 생성되나요?
var pnChannel = "map-channel";
var pubnub = new PubNub({
publishKey: 'YOUR_PUB_KEY',
subscribeKey: 'YOUR_SUB_KEY'
});
pubnub.subscribe({channels: [pnChannel]});
pubnub.addListener({message:redraw});
이 간단한 튜토리얼에서는 현재 시간을 기준으로 새 위치를 게시하는 기본 자바스크립트 간격 타이머를 설정합니다. 500밀리초마다 익명 콜백 함수를 호출하여 지정된 PubNub 채널에 새 위도/경도 객체(circlePoint() 호출로 생성됨)를 게시합니다.
setInterval(function() {
pubnub.publish({channel:pnChannel, message:circlePoint(new Date().getTime()/1000)});
}, 500);
</script>
Google 지도 초기화
마지막으로, 마지막에 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>
다음 단계
이제 자바스크립트 지도 애플리케이션이 완성되었고 지도 마커를 그릴 수 있습니다. 다음 단계는 디바이스의 위치를 감지하고 실시간으로 플로팅하여 위치 변화에 따라 이동하는 것으로, 이 부분은 3부 지리적 위치에서 다룰 것입니다!
관련 용어
목차
지도 마커란 무엇인가요?튜토리얼 개요코드연습위도/경도지도 마커 위치이동지도와 PubNub연결하기Google 지도 초기화다음단계관련용어
펍넙이 어떤 도움을 줄 수 있나요?
이 문서는 원래 PubNub.com에 게시되었습니다.
저희 플랫폼은 개발자가 웹 앱, 모바일 앱, IoT 기기를 위한 실시간 상호작용을 구축, 제공, 관리할 수 있도록 지원합니다.
저희 플랫폼의 기반은 업계에서 가장 크고 확장성이 뛰어난 실시간 에지 메시징 네트워크입니다. 전 세계 15개 이상의 PoP가 월간 8억 명의 활성 사용자를 지원하고 99.999%의 안정성을 제공하므로 중단, 동시 접속자 수 제한 또는 트래픽 폭증으로 인한 지연 문제를 걱정할 필요가 없습니다.
PubNub 체험하기
라이브 투어를 통해 5분 이내에 모든 PubNub 기반 앱의 필수 개념을 이해하세요.
설정하기
PubNub 계정에 가입하여 PubNub 키에 무료로 즉시 액세스하세요.
시작하기
사용 사례나 SDK에 관계없이 PubNub 문서를 통해 바로 시작하고 실행할 수 있습니다.
