Śledzenie geolokalizacji JavaScript za pomocą Google Maps API

PubNub Developer Relations - Feb 28 - - Dev Community

To jest druga część naszej czteroczęściowej serii na temat tworzenia map w czasie rzeczywistym ze śledzeniem geolokalizacji dla stron internetowych i mobilnych przy użyciu JavaScript Google Maps API i PubNub.

Czym są znaczniki map?

W tym samouczku dodamy znaczniki map do naszej mapy internetowej lub mobilnej. Znaczniki map służą do identyfikacji lokalizacji użytkownika lub urządzenia na mapie. Aby rozpocząć korzystanie z tej funkcji, umieścimy pojedynczy znacznik mapy na naszej mapie i losowo zaktualizujemy jego lokalizację. W następnych częściach przeniesiemy znacznik mapy w oparciu o rzeczywistą lokalizację urządzenia.

javascript_mapmarker

Przegląd samouczka

Jeśli jeszcze tego nie zrobiłeś, musisz najpierw zadbać o kilka warunków wstępnych, które omówiliśmy w części pierwszej. Obejmują one:

  • Tworzenie aplikacji PubNub, w tym kluczy publikowania i subskrybowania.
  • Tworzenie projektu Google Maps API i poświadczeń

Kod tego przykładu jest dostępny jako Codepen tutaj.

Przewodnik po kodzie

Ta struktura kodu powinna być znajoma, jeśli w przeszłości pracowałeś z aplikacjami HTML5. Zaczynamy od zwykłej aplikacji HTML5 i dołączamy bibliotekę PubNub do komunikacji w czasie rzeczywistym oraz Bootstrap CSS do minimalnej stylizacji.

<!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>
Enter fullscreen mode Exit fullscreen mode

Jeśli zastanawiasz się, gdzie znajduje się interfejs API Map Google, to jest on na samym końcu strony HTML5. Dzięki temu cały DOM jest dostępny dla kodu map.

Następnie tworzymy DIV dla aplikacji, a wewnątrz niego DIV do przechowywania mapy. W naszym przypadku używamy inline CSS dla szerokości i wysokości. W prawdziwej aplikacji klasy produkcyjnej prawdopodobnie zdefiniowałbyś tę stylizację w innym miejscu. To jest to, o czym mówiliśmy, gdy powiedzieliśmy, że chcemy dołączyć skrypt Map Google po zdefiniowaniu elementu Map canvas DOM.

<div class="container">
  <h1>PubNub Google Maps Tutorial - Live Map Marker</h1>
  <div id="map-canvas" style="width:600px;height:400px"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

Teraz musimy przebrnąć przez kilka skryptów JavaScript. Zróbmy to krok po kroku.

Szerokość/długość geograficzna

Najpierw ustawiamy początkową szerokość i długość geograficzną w ogólnym sąsiedztwie San Francisco. Następnie definiujemy funkcję, która wyznacza punkt na okręgu w oparciu o bieżący czas. Definiujemy promień (w stopniach szerokości/długości geograficznej). Przyjmujemy czas (w sekundach epoki).

Dzięki magii trygonometrii punkt na okręgu jest dany przez x = "początkowa długość geograficzna plus cosinus wejścia razy promień", a y = "początkowa szerokość geograficzna plus sinus wejścia razy promień". Dla wygody zwracamy obiekt JavaScript zawierający te wartości jako szerokość i długość geograficzną.

<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};
};
Enter fullscreen mode Exit fullscreen mode

Przesuwanie pozycji znacznika mapy

Skoro matematykę mamy już za sobą, przejdźmy do konkretów. Definiujemy zmienne map i mark, aby przechowywać naszą mapę i obiekty znaczników, abyśmy mogli nimi manipulować w locie, gdy będą przychodzić zdarzenia PubNub. Następnie definiujemy wywołanie zwrotne inicjalizacji, które interfejs API JavaScript Map Google może wywołać, gdy jest gotowy do załadowania, i upewniamy się, że jest to element członkowski obiektu okna, aby był dostępny dla interfejsu 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;
Enter fullscreen mode Exit fullscreen mode

Następnie definiujemy funkcję obsługi zdarzenia przerysowania, którą będziemy wywoływać za każdym razem, gdy otrzymamy nowe zdarzenie zmiany pozycji w locie. W pierwszej części funkcji ustawiamy szerokość i długość geograficzną na nowe wartości z komunikatu. Następnie wywołujemy odpowiednie metody na mapie i obiektach znaczników, aby zaktualizować pozycję i ponownie wyśrodkować mapę.

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});
};
Enter fullscreen mode Exit fullscreen mode

Podłączanie mapy do PubNub

Teraz, gdy zdefiniowaliśmy nasze wywołania zwrotne, mamy całą niezbędną maszynerię, dzięki czemu możemy przejść do inicjalizacji funkcji przesyłania strumieniowego danych w czasie rzeczywistym PubNub. Najpierw decydujemy o nazwie kanału, na którym będziemy oczekiwać nowych aktualizacji pozycji. Następnie inicjalizujemy bibliotekę PubNub przy użyciu kluczy publikowania i subskrybowania, które skonfigurowaliśmy wcześniej w kroku 1 warunków wstępnych.

Na koniec mówimy bibliotece PubNub, aby zasubskrybowała odpowiedni kanał i dołączamy funkcję redraw jako nasłuchującą przychodzących zdarzeń. Co tworzy te zdarzenia, można zapytać?

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

Na potrzeby tego prostego samouczka skonfigurowaliśmy podstawowy licznik interwałów JavaScript, aby publikować nowe pozycje w oparciu o bieżący czas. Co 500 milisekund wywołujemy anonimową funkcję zwrotną, która publikuje nowy obiekt szerokości/długości geograficznej (utworzony przez wywołanie circlePoint()) na określonym kanale PubNub.

setInterval(function() {
  pubnub.publish({channel:pnChannel, message:circlePoint(new Date().getTime()/1000)});
}, 500);
</script>
Enter fullscreen mode Exit fullscreen mode

Inicjalizacja Google Maps

Wreszcie, na samym końcu inicjalizujemy interfejs API Map Google, aby upewnić się, że elementy DOM i warunki wstępne JavaScript są spełnione.

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

Następne kroki

Dzięki temu mamy teraz naszą aplikację mapową JavaScript i jesteśmy w stanie wykreślić znaczniki mapy. Następnym krokiem jest wykrycie lokalizacji urządzenia i wykreślenie jej w czasie rzeczywistym, przesuwając ją wraz ze zmianą lokalizacji, co omówimy w części 3 dotyczącej geolokalizacji!

Powiązane terminy

Zawartość

Czym są znaczniki mapy?PrzeglądsamouczkaPrzebiegkoduWielkość/długośćgeograficznaPrzesuwaniepozycji znacznika mapyPodłączaniemapy do PubNubInicjalizacjaGoogle MapsNastępnekrokiPowiązaneterminy

Jak PubNub może ci pomóc?

Ten artykuł został pierwotnie opublikowany na PubNub.com

Nasza platforma pomaga programistom tworzyć, dostarczać i zarządzać interaktywnością w czasie rzeczywistym dla aplikacji internetowych, aplikacji mobilnych i urządzeń IoT.

Fundamentem naszej platformy jest największa w branży i najbardziej skalowalna sieć przesyłania wiadomości w czasie rzeczywistym. Dzięki ponad 15 punktom obecności na całym świecie obsługującym 800 milionów aktywnych użytkowników miesięcznie i niezawodności na poziomie 99,999%, nigdy nie będziesz musiał martwić się o przestoje, limity współbieżności lub jakiekolwiek opóźnienia spowodowane skokami ruchu.

Poznaj PubNub

Sprawdź Live Tour, aby zrozumieć podstawowe koncepcje każdej aplikacji opartej na PubNub w mniej niż 5 minut.

Rozpocznij konfigurację

Załóż konto PubNub, aby uzyskać natychmiastowy i bezpłatny dostęp do kluczy PubNub.

Rozpocznij

Dokumenty PubNub pozwolą Ci rozpocząć pracę, niezależnie od przypadku użycia lub zestawu SDK.

Image
Final Blog
Image
Why WordPress is the Best Platform for Your Website: Insights from Mike Savage

wordpress, website, development, seo
Image
Buy verified cash app account

webdev, javascript, beginners, programming
Image
Do LLMs Have Distinct and Consistent Personality? TRAIT: Personality Testset designed for LLMs with Psychometrics

machinelearning, ai, beginners, datascience
Image
From Artificial Needles to Real Haystacks: Improving Retrieval Capabilities in LLMs by Finetuning on Synthetic Data

machinelearning, ai, beginners, datascience
Image
Computational Life: How Well-formed, Self-replicating Programs Emerge from Simple Interaction

machinelearning, ai, beginners, datascience
Image
Evaluating the Social Impact of Generative AI Systems in Systems and Society

machinelearning, ai, beginners, datascience
Image
From Decoding to Meta-Generation: Inference-time Algorithms for Large Language Models

machinelearning, ai, beginners, datascience
Image
Thermometer: Towards Universal Calibration for Large Language Models

machinelearning, ai, beginners, datascience
Image
MobileLLM: Optimizing Sub-billion Parameter Language Models for On-Device Use Cases

machinelearning, ai, beginners, datascience
Image
Assessing the nature of large language models: A caution against anthropocentrism

machinelearning, ai, beginners, datascience
Image
MAGIS: LLM-Based Multi-Agent Framework for GitHub Issue Resolution

machinelearning, ai, beginners, datascience
Image
The Remarkable Robustness of LLMs: Stages of Inference?

machinelearning, ai, beginners, datascience
Image
ReFT: Reasoning with Reinforced Fine-Tuning

machinelearning, ai, beginners, datascience
Image
Automating User Management in Linux with Bash

linux, bash, automation, devops
Image
SciBench: Evaluating College-Level Scientific Problem-Solving Abilities of Large Language Models

machinelearning, ai, beginners, datascience
Image
Middleware function Execution Problem and Solution

webdev, javascript, programming, middleware
Image
Day 9 of Machine Learning|| Linear Regression implementation

machinelearning, datascience, tutorial, beginners
Image
Akira - Respond to all feedback, fix every listing, and get insights

reputation, restaurant, feedback, reviews
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .