Śledzenie geolokalizacji JavaScript za pomocą Google Maps API
Published: 2024-02-28 19:53:08

_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](https://images.ctfassets.net/3prze68gbwl1/asset-17suaysk1qa1k12/d3521204222e8e1ef529a489ea3aaf8b/pubnub_javascript_mapmarker.gif "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](https://pubnub.com/blog/javascript-mapping-javascript-tracking/). 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](https://codepen.io/team/PubNub/pen/GOVqpr).

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.

```js
<!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>
```

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.

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

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ą.

```js
<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};
};
```

### 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.

```js
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;
```

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ę.

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

### 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](https://pubnub.com/blog/javascript-mapping-javascript-tracking/#pubnub-setup).

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ć?

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

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.

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

### 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.

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

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](https://pubnub.com/blog/javascript-google-maps-api-location-publishing/)!

Powiązane terminy
-----------------

-   [Interfejs API kierunków](https://www.pubnub.com/learn/glossary/what-is-a-directions-api/)
    
-   [GIS](https://www.pubnub.com/learn/glossary/what-is-a-geographic-information-system-gis/)
    
-   [API map](https://www.pubnub.com/learn/glossary/what-is-a-map-api/)
    
-   [Co to jest interfejs API geolokalizacji?](https://www.pubnub.com/learn/glossary/what-is-a-geolocation-api/)
    

#### Zawartość

[Czym są znaczniki mapy?](#h-0)[Przegląd](#h-1)[samouczkaPrzebieg](#h-2)[koduWielkość/długość](#h-3)[geograficznaPrzesuwanie](#h-2)[pozycji znacznika mapyPodłączanie](#h-4)[mapy do PubNubInicjalizacja](#h-5)[Google MapsNastępne](#h-6)[krokiPowiązane](#h-7)[terminy](#h-8)

Jak PubNub może ci pomóc?
=========================

Ten artykuł został pierwotnie opublikowany na [PubNub.com](https://www.pubnub.com/blog/javascript-google-maps-api-map-markers)

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](https://www.pubnub.com/tour/introduction/), aby zrozumieć podstawowe koncepcje każdej aplikacji opartej na PubNub w mniej niż 5 minut.

Rozpocznij konfigurację
-----------------------

Załóż [konto](https://admin.pubnub.com/signup/) PubNub, aby uzyskać natychmiastowy i bezpłatny dostęp do kluczy PubNub.

Rozpocznij
----------

[Dokumenty](https://www.pubnub.com/docs) PubNub pozwolą Ci rozpocząć pracę, niezależnie od przypadku użycia lub [zestawu SDK](https://www.pubnub.com/docs).