Dodawanie mapy do witryny (JavaScript)

1. Zanim zaczniesz

Z tego ćwiczenia w Codelabs dowiesz się wszystkiego, co jest potrzebne, aby zacząć korzystać z Google Maps Platform w internecie. Poznasz wszystkie podstawy, od konfiguracji po wczytywanie interfejsu Maps JavaScript API, wyświetlanie pierwszej mapy, pracę ze znacznikami i klastrowaniem znaczników, rysowanie na mapie i obsługę interakcji użytkownika.

Co utworzysz

e52623cb8578d625.png

W tym laboratorium utworzysz prostą aplikację internetową, która wykonuje te czynności:

  • Wczytuje interfejs Maps JavaScript API
  • Wyświetla mapę wyśrodkowaną na Sydney w Australii.
  • Wyświetla niestandardowe znaczniki popularnych atrakcji w Sydney
  • Implementuje łączenie znaczników w klastry
  • Umożliwia interakcję użytkownika, która po kliknięciu znacznika wyśrodkowuje mapę i rysuje na niej okrąg.

Czego się nauczysz

  • Pierwsze kroki z Google Maps Platform
  • Dynamiczne wczytywanie interfejsu Maps JavaScript API z kodu JavaScript
  • Wczytywanie mapy
  • Korzystanie z markerów, markerów niestandardowych i grupowania markerów
  • Korzystanie z systemu zdarzeń interfejsu Maps JavaScript API w celu zapewnienia interakcji z użytkownikiem
  • Dynamiczne sterowanie mapą
  • Rysowanie na mapie

2. Wymagania wstępne

Aby ukończyć to ćwiczenie, musisz zapoznać się z poniższymi elementami. Jeśli znasz już Google Maps Platform, przejdź od razu do laboratorium programowania.

Wymagane usługi Google Maps Platform

W tym laboratorium kodowania użyjesz tych usług Google Maps Platform:

Inne wymagania dotyczące tych ćwiczeń z programowania

Aby ukończyć to ćwiczenie, potrzebujesz tych kont, usług i narzędzi:

  • konto Google Cloud Platform z włączonymi płatnościami;
  • klucz interfejsu API Google Maps Platform z włączonym interfejsem Maps JavaScript API;
  • Podstawowa znajomość języków JavaScript, HTML i CSS
  • Node.js zainstalowany na komputerze.
  • wybrany edytor tekstu lub IDE;

Pierwsze kroki z Google Maps Platform

Jeśli nie korzystasz jeszcze z Google Maps Platform, wykonaj te czynności, korzystając z przewodnika Wprowadzenie do Google Maps Platform lub z playlisty Wprowadzenie do Google Maps Platform:

  1. Utwórz konto rozliczeniowe.
  2. Utwórz projekt.
  3. Włącz interfejsy API i pakiety SDK Google Maps Platform (wymienione w poprzedniej sekcji).
  4. Wygeneruj klucz interfejsu API.

3. Pierwsze kroki

Konfigurowanie Google Maps Platform

Jeśli nie masz jeszcze konta Google Cloud Platform i projektu z włączonymi płatnościami, zapoznaj się z przewodnikiem Pierwsze kroki z Google Maps Platform, aby utworzyć konto rozliczeniowe i projekt.

  1. W konsoli Google Cloud kliknij menu projektu i wybierz projekt, którego chcesz użyć w tym samouczku.

  1. Włącz interfejsy API i pakiety SDK Google Maps Platform wymagane w tym samouczku w Google Cloud Marketplace. Aby to zrobić, wykonaj czynności opisane w tym filmie lub tej dokumentacji.
  2. Wygeneruj klucz interfejsu API na stronie Dane logowania w konsoli Cloud. Możesz wykonać czynności opisane w tym filmie lub tej dokumentacji. Wszystkie żądania wysyłane do Google Maps Platform wymagają klucza interfejsu API.

Konfiguracja Node.js

Jeśli jeszcze nie masz środowiska wykonawczego Node.js, pobierz je i zainstaluj na komputerze, otwierając stronę https://nodejs.org/.

Node.js zawiera menedżera pakietów npm, który jest potrzebny do zainstalowania zależności w tym ćwiczeniu.

Konfigurowanie szablonu projektu startowego

Zanim zaczniesz to ćwiczenie (w Codelabs), wykonaj te czynności, aby pobrać szablon projektu początkowego oraz pełny kod rozwiązania:

  1. Pobierz lub sklonuj repozytorium GitHub tego modułu na stronie https://github.com/googlecodelabs/maps-platform-101-js.

Projekt początkowy znajduje się w katalogu /starter i zawiera podstawową strukturę plików potrzebną do ukończenia ćwiczeń z programowania. Wszystko, czego potrzebujesz do pracy, znajduje się w katalogu /starter/src. 2. Po pobraniu projektu początkowego uruchom polecenie npm install w katalogu /starter. Spowoduje to zainstalowanie wszystkich potrzebnych zależności wymienionych w pliku package.json. 3. Po zainstalowaniu zależności uruchom w katalogu polecenie npm start.

Projekt startowy został skonfigurowany tak, aby używać webpack-dev-server, który kompiluje i uruchamia pisany przez Ciebie kod lokalnie. webpack-dev-server automatycznie przeładowuje też aplikację w przeglądarce za każdym razem, gdy wprowadzasz zmiany w kodzie.

Jeśli chcesz zobaczyć działający pełny kod rozwiązania, wykonaj powyższe czynności konfiguracyjne w katalogu /solution.

4. Wczytywanie interfejsu Maps JavaScript API

Zanim zaczniesz, wykonaj czynności opisane w sekcji Przygotowanie. Wszystko gotowe? Czas utworzyć pierwszą aplikację internetową za pomocą Google Maps Platform.

Podstawą korzystania z Google Maps Platform w internecie jest interfejs Maps JavaScript API. Ten interfejs API udostępnia interfejs JavaScript do korzystania ze wszystkich funkcji Google Maps Platform, w tym mapy, znaczników, narzędzi do rysowania i innych usług Google Maps Platform, takich jak Miejsca.

Jeśli masz już doświadczenie z interfejsem Maps JavaScript API, być może wiesz, że można go wczytać, wstawiając tag script do pliku HTML w ten sposób:

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

To nadal prawidłowy sposób wczytywania interfejsu API, ale w nowoczesnym JavaScript zależności są zwykle dynamicznie dołączane z kodu. Aby uzyskać efekt podobny do tagu script powyżej, użyj modułu@googlemaps/js-api-loader. Narzędzie JS API Loader jest już uwzględnione w zależnościach pliku package.json projektu, więc zostało zainstalowane podczas wcześniejszego uruchomienia polecenia npm install.

Aby użyć narzędzia do wczytywania interfejsu JS API:

  1. Otwórz pokój /src/app.js. W tym pliku wykonasz wszystkie zadania w ramach tego laboratorium.
  2. Zaimportuj klasę Loader z pakietu @googlemaps/js-api-loader.

     Dodaj na początku pliku app.js ten kod:
     import { Loader } from '@googlemaps/js-api-loader';
  3. Utwórz obiekt apiOptions.

    Klasa Loader wymaga obiektu JSON, który określa różne opcje wczytywania interfejsu Maps JavaScript API, w tym klucz interfejsu API Google Maps Platform, wersję interfejsu API, którą chcesz wczytać, oraz dodatkowe biblioteki udostępniane przez interfejs Maps JS API, które chcesz wczytać. Na potrzeby tego ćwiczenia musisz tylko podać klucz interfejsu API, dodając do app.js ten ciąg znaków:
     const apiOptions = {
   apiKey: "YOUR API KEY"
 }
  4. Utwórz instancję Loader i przekaż do niej apiOptions.
     const loader = new Loader(apiOptions);
  5. Wczytaj interfejs Maps JS API.

     Aby załadować interfejs API, wywołaj load() w instancji Loader. Program wczytujący interfejs JS API zwraca obietnicę, która jest spełniana po wczytaniu interfejsu API i przygotowaniu go do użycia. Dodaj ten kod, aby wczytać interfejs API i obsłużyć obietnicę:
     loader.load().then(() => {
   console.log('Maps JS API loaded');
 });

Jeśli wszystko przebiegnie pomyślnie, w konsoli przeglądarki zobaczysz instrukcję console.log. W Chrome to dodatkowe okno jest dostępne w sekcji Widok –> Deweloper –> Konsola JavaScript.

4fa88d1618cc7fd.png

Podsumowując, interfejs Maps JavaScript API został wczytany dynamicznie z kodu, a funkcja wywołania zwrotnego, która jest wykonywana po zakończeniu wczytywania interfejsu Maps JavaScript API, została zdefiniowana.

Plik app.js powinien wyglądać mniej więcej tak:

    import { Loader } from '@googlemaps/js-api-loader';

    const apiOptions = {
      apiKey: "YOUR API KEY"
    }

    const loader = new Loader(apiOptions);

    loader.load().then(() => {
      console.log('Maps JS API Loaded');
    });

Interfejs Maps JavaScript API został już wczytany. W następnym kroku wczytasz mapę.

5. Wyświetlanie mapy

Czas wyświetlić pierwszą mapę.

Najczęściej używaną częścią interfejsu Maps JavaScript API jest google.maps.Map, czyli klasa, która umożliwia tworzenie instancji mapy i manipulowanie nimi. Zobacz, jak to zrobić, tworząc nową funkcję o nazwie displayMap().

  1. Określ ustawienia mapy.

    Interfejs Maps JavaScript API obsługuje różne ustawienia mapy, ale tylko 2 z nich są wymagane:
    • center: ustawia szerokość i długość geograficzną środka mapy.
    • zoom: określa początkowy poziom powiększenia mapy.
    Użyj poniższego kodu, aby wyśrodkować mapę na Sydney w Australii i ustawić poziom powiększenia na 14, czyli odpowiedni do wyświetlenia centrum miasta.
     function displayMap() {
   const mapOptions = {
     center: { lat: -33.860664, lng: 151.208138 },
     zoom: 14
   };
 }
  2. Pobierz div, w którym mapa ma zostać wstawiona do DOM.

    Zanim wyświetlisz mapę, musisz poinformować interfejs Maps JavaScript API, gdzie ma się ona pojawić na stronie. Jeśli szybko zajrzysz do index.html, zobaczysz, że jest już div, który wygląda tak:
     <div id="map"></div>
    Aby poinformować interfejs Maps JavaScript API, że w tym miejscu chcesz wstawić mapę, użyj document.getElementById, aby uzyskać odwołanie do elementu DOM:
     const mapDiv = document.getElementById('map');
  3. Utwórz instancję google.maps.Map.

    Aby poprosić Maps JavaScript API o utworzenie nowej mapy, która może być wyświetlana, utwórz instancję google.maps.Map i przekaż do niej mapDiv i mapOptions. Z tej funkcji zwracasz też instancję Map, aby móc później z niej korzystać:
     const map = new google.maps.Map(mapDiv, mapOptions);
 return map;
  4. Wyświetl mapę.

    Gdy zdefiniujesz całą logikę tworzenia instancji mapy, wystarczy wywołać funkcję displayMap() z obsługi obietnicy interfejsu JS API, aby była ona wywoływana po wczytaniu interfejsu Google Maps JavaScript API:
     loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
 });

W przeglądarce powinna pojawić się piękna mapa Sydney:

fb0cd6bc38532780.png

Podsumowując, w tym kroku zdefiniowano opcje wyświetlania mapy, utworzono nową instancję mapy i wstawiono ją do DOM.

Funkcja displayMap() powinna wyglądać mniej więcej tak:

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14
  };
  const mapDiv = document.getElementById('map');
  const map = new google.maps.Map(mapDiv, mapOptions);
  return map;
}

6. Definiowanie stylów map w Google Cloud (opcjonalnie)

Styl mapy możesz dostosować za pomocą definiowania stylów map w Google Cloud.

Tworzenie identyfikatora mapy

Jeśli nie masz jeszcze identyfikatora mapy powiązanego ze stylem mapy, zapoznaj się z przewodnikiem Identyfikatory mapy i wykonaj te czynności:

  1. Utwórz identyfikator mapy.
  2. powiązać identyfikator mapy ze stylem mapy.

Dodawanie identyfikatora mapy do aplikacji

Aby użyć utworzonego identyfikatora mapy, zmodyfikuj funkcję displayMap w pliku app.js i przekaż identyfikator mapy we właściwości mapId obiektu mapOptions.

app.js

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14,
    mapId: 'YOUR_MAP_ID'
  };
  const mapDiv = document.getElementById('map');
  return new google.maps.Map(mapDiv, mapOptions);
}

Po wykonaniu tych czynności wybrany styl powinien być widoczny na mapie.

7. Dodawanie znaczników do mapy

Programiści mogą korzystać z interfejsu Maps JavaScript API na wiele sposobów, ale umieszczanie znaczników na mapie jest zdecydowanie najpopularniejsze. Znaczniki umożliwiają wyświetlanie określonych punktów na mapie i są powszechnym elementem interfejsu do obsługi interakcji użytkownika. Jeśli korzystasz już z Map Google, prawdopodobnie znasz domyślny znacznik, który wygląda tak:

590815267846f166.png

W tym kroku użyjesz ikony google.maps.Marker, aby umieścić znaczniki na mapie.

  1. Określ obiekt dla lokalizacji markerów.

     Na początek utwórz nową funkcję addMarkers() i zadeklaruj obiekt locations, który zawiera ten zestaw punktów szerokości i długości geograficznej dla popularnych atrakcji turystycznych w Sydney.

    Pamiętaj też, że musisz przekazać do funkcji swoją instancję Map. Użyjesz go później podczas tworzenia instancji markera.
     function addMarkers(map) {
   const locations = {
     operaHouse: { lat: -33.8567844, lng: 151.213108 },
     tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
     manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
     hyderPark: { lat: -33.8690081, lng: 151.2052393 },
     theRocks: { lat: -33.8587568, lng: 151.2058246 },
     circularQuay: { lat: -33.858761, lng: 151.2055688 },
     harbourBridge: { lat: -33.852228, lng: 151.2038374 },
     kingsCross: { lat: -33.8737375, lng: 151.222569 },
     botanicGardens: { lat: -33.864167, lng: 151.216387 },
     museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
     maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
     kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
     aquarium: { lat: -33.869627, lng: 151.202146 },
     darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
     barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
   }
 }
  2. Utwórz instancję google.maps.Marker dla każdego znacznika, który chcesz wyświetlić.

    Aby utworzyć markery, użyj poniższego kodu do iteracji obiektu locations za pomocą pętli for...in, utwórz zestaw opcji renderowania każdego markera, a następnie utwórz instancję google.maps.Marker dla każdej lokalizacji.

    Zwróć uwagę na właściwość icon elementu markerOptions. Pamiętasz domyślny pinezek z wcześniejszej części kursu? Czy wiesz, że możesz dostosować pinezkę, aby była dowolnym obrazem? Możesz to zrobić.

     Właściwość icon umożliwia podanie ścieżki do dowolnego pliku obrazu, który chcesz użyć jako niestandardowego znacznika. Jeśli ten przewodnik po programowaniu został rozpoczęty przy użyciu naszego szablonu projektu, obraz jest już uwzględniony w /src/images.

    Zwróć też uwagę, że musisz przechowywać instancje markerów w tablicy i zwracać je z funkcji, aby można było ich później używać.
     const markers = [];
 for (const location in locations) {
   const markerOptions = {
     map: map,
     position: locations[location],
     icon: './img/custom_pin.png'
   }
   const marker = new google.maps.Marker(markerOptions);
   markers.push(marker);
 }
 return markers;
  3. Wyświetl znaczniki.

    Interfejs Maps JavaScript API automatycznie tworzy i wyświetla znacznik za każdym razem, gdy tworzona jest nowa instancja google.maps.Marker, więc wystarczy zaktualizować moduł obsługi obietnic interfejsu JS API, aby wywoływał funkcję addMarkers() i przekazywał do niej instancję Map:
     loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
 });

Na mapie powinny pojawić się niestandardowe znaczniki:

1e4a55de15215480.png

Podsumowując, w tym kroku zdefiniowano zestaw lokalizacji znaczników i utworzono instancję google.maps.Marker z niestandardową ikoną znacznika dla każdej lokalizacji.

Funkcja addMarkers() powinna wyglądać mniej więcej tak:

    function addMarkers(map) {
      const locations = {
        operaHouse: { lat: -33.8567844, lng: 151.213108 },
        tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
        manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
        hyderPark: { lat: -33.8690081, lng: 151.2052393 },
        theRocks: { lat: -33.8587568, lng: 151.2058246 },
        circularQuay: { lat: -33.858761, lng: 151.2055688 },
        harbourBridge: { lat: -33.852228, lng: 151.2038374 },
        kingsCross: { lat: -33.8737375, lng: 151.222569 },
        botanicGardens: { lat: -33.864167, lng: 151.216387 },
        museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
        maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
        kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
        aquarium: { lat: -33.869627, lng: 151.202146 },
        darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
        barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
      }
      const markers = [];
      for (const location in locations) {
        const markerOptions = {
          map: map,
          position: locations[location],
          icon: './img/custom_pin.png'
        }
        const marker = new google.maps.Marker(markerOptions);
        markers.push(marker);
      }
      return markers;
    }

W następnym kroku dowiesz się, jak poprawić wygodę użytkowników korzystających ze znaczników za pomocą klastrowania znaczników.

8. Włączanie klastrowania znaczników

Jeśli używasz wielu znaczników lub znaczników, które znajdują się blisko siebie, mogą one na siebie nachodzić lub być zbyt blisko siebie, co pogarsza komfort użytkownika. Na przykład po utworzeniu markerów w ostatnim kroku możesz zauważyć, że:

6e39736160c6bce4.png

W takiej sytuacji przydaje się grupowanie znaczników. Kolejną często wdrażaną funkcją jest grupowanie znaczników, które polega na łączeniu pobliskich znaczników w jedną ikonę zmieniającą się w zależności od poziomu powiększenia, np. tak:

4f372caab95d7499.png

Algorytm klastrowania znaczników dzieli widoczny obszar mapy na siatkę, a następnie grupuje ikony znajdujące się w tej samej komórce. Na szczęście nie musisz się tym martwić, ponieważ zespół Google Maps Platform stworzył przydatną bibliotekę narzędziową o otwartym kodzie źródłowym o nazwie MarkerClustererPlus, która wykonuje wszystko automatycznie. Kod źródłowy MarkerClustererPlus znajdziesz na GitHubie.

  1. Zaimportuj MarkerCluster.

    W przypadku projektu szablonu do tego laboratorium kodowania biblioteka narzędzi MarkerClustererPlus jest już uwzględniona w zależnościach zadeklarowanych w pliku package.json, więc została zainstalowana podczas uruchamiania polecenia npm install na początku tego laboratorium.

    Aby zaimportować bibliotekę, dodaj na początku pliku app.js ten kod:
     import MarkerClusterer from '@google/markerclustererplus';
  2. Utwórz nową instancję MarkerClusterer.

    Aby utworzyć klastry znaczników, musisz wykonać 2 czynności: podać ikony, których chcesz używać w klastrach znaczników, i utworzyć nową instancję MarkerClusterer.

    Najpierw zadeklaruj obiekt, który określa ścieżkę do ikon, których chcesz używać. W projekcie szablonu jest już zestaw obrazów zapisanych w ./img/m. Zwróć uwagę, że nazwy plików obrazów są numerowane kolejno z tym samym prefiksem: m1.png, m2.png, m3.png itd.

    Gdy w opcjach narzędzia do grupowania znaczników ustawisz właściwość imagePath, wystarczy podać ścieżkę i prefiks pliku. Narzędzie do grupowania znaczników automatycznie użyje wszystkich plików z tym prefiksem i doda na końcu numer.

     Po drugie, utwórz nową instancję klasy MarkerClusterer i przekaż jej instancję klasy Map, w której chcesz wyświetlać klastry znaczników, oraz tablicę instancji klasy Marker, które chcesz zgrupować.
     function clusterMarkers(map, markers) {
   const clustererOptions = { imagePath: './img/m' }
   const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
 }
  3. Wyświetl klastry znaczników.

     Wywołaj funkcję clusterMarkers() z obsługi obietnic interfejsu JS API. Klastry znaczników są automatycznie dodawane do mapy, gdy w wywołaniu funkcji tworzona jest instancja MarkerClusterer.
     loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
 });

Na mapie powinny pojawić się klastry znaczników.

e52623cb8578d625.png

Zwróć uwagę, że jeśli powiększysz lub pomniejszysz widok, MarkerClustererPlus automatycznie zmieni numerację i rozmiar klastrów. Możesz też kliknąć dowolną ikonę klastra znaczników, aby powiększyć widok i zobaczyć wszystkie znaczniki w tym klastrze.

d572fa11aca13eeb.png

Podsumowując, w tym kroku zaimportowaliśmy bibliotekę narzędziową MarkerClustererPlus o otwartym kodzie źródłowym i użyliśmy jej do utworzenia instancji MarkerClusterer, która automatycznie zgrupowała markery utworzone w poprzednim kroku.

Funkcja clusterMarkers() powinna wyglądać mniej więcej tak:

    function clusterMarkers(map, markers) {
      const clustererOptions = { imagePath: './img/m' }
      const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
    }

Teraz dowiesz się, jak obsługiwać interakcje użytkowników.

9. Dodawanie interakcji użytkownika

Masz teraz świetnie wyglądającą mapę, która wyświetla niektóre z najpopularniejszych atrakcji turystycznych Sydney. W tym kroku dodasz dodatkową obsługę interakcji użytkownika za pomocą systemu zdarzeń interfejsu Maps JavaScript API, aby jeszcze bardziej ulepszyć mapę.

Interfejs Maps JavaScript API udostępnia kompleksowy system zdarzeń, który korzysta z procedur obsługi zdarzeń JavaScript, aby umożliwić Ci obsługę w kodzie różnych interakcji użytkownika. Możesz na przykład utworzyć detektory zdarzeń, które będą wywoływać wykonanie kodu w przypadku interakcji takich jak kliknięcie mapy i znaczników, przesuwanie widoku mapy, powiększanie i pomniejszanie oraz innych.

W tym kroku dodasz detektor kliknięć do znaczników, a następnie zaprogramujesz przesuwanie mapy tak, aby kliknięty przez użytkownika znacznik znalazł się na środku mapy.

  1. Ustaw odbiornik kliknięć na znacznikach.

    Wszystkie obiekty w Maps JavaScript API, które obsługują system zdarzeń, implementują standardowy zestaw funkcji do obsługi interakcji użytkownika, takich jak addListener, removeListener i inne.

    Aby dodać detektor zdarzeń kliknięcia do każdego znacznika, przeiteruj tablicę markers i wywołaj addListener w instancji znacznika, aby dołączyć detektor zdarzenia click:
     function addPanToMarker(map, markers) {
   markers.map(marker => {
     marker.addListener('click', event => {

     });
   });
 }
  2. Przesuwanie do znacznika po kliknięciu.

    Zdarzenie click jest wywoływane za każdym razem, gdy użytkownik kliknie lub dotknie znacznik. Zwraca ono zdarzenie w postaci obiektu JSON z informacjami o klikniętym elemencie interfejsu. Aby poprawić komfort użytkowników, możesz obsługiwać zdarzenie click i używać jego obiektu LatLng do uzyskiwania szerokości i długości geograficznej klikniętego markera.

    Następnie przekaż tę wartość do wbudowanej funkcji panTo() instancji Map, aby mapa płynnie przesunęła się i wyśrodkowała kliknięty znacznik. W tym celu dodaj w funkcji wywołania zwrotnego obsługi zdarzeń ten kod:
     const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
 map.panTo(location);
  3. Przypisz detektory kliknięć.

     Wywołaj funkcję addPanToMarker() z obsługi obietnic interfejsu JS API i przekaż do niej mapę oraz znaczniki, aby wykonać kod i przypisać detektory kliknięć.
     loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
   addPanToMarker(map, markers);
 });

Teraz otwórz przeglądarkę i kliknij znaczniki. Po kliknięciu znacznika mapa powinna się automatycznie przesunąć, aby ponownie wyśrodkować widok.

Podsumowując, w tym kroku użyto systemu zdarzeń interfejsu Maps JavaScript API, aby przypisać detektor kliknięć do wszystkich znaczników na mapie, pobrać szerokość i długość geograficzną znacznika ze zdarzenia kliknięcia oraz użyć tych danych do ponownego wyśrodkowania mapy po kliknięciu znacznika.

Funkcja addPanToMarker() powinna wyglądać mniej więcej tak:

    function addPanToMarker(map, markers) {
      markers = markers.map(marker => {
        marker.addListener('click', event => {
          const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
          map.panTo(location);
        });
      });
      return markers;
    }

Został już tylko jeden krok. Następnie możesz jeszcze bardziej ulepszyć interfejs mapy, korzystając z funkcji rysowania interfejsu Maps JavaScript API.

10. Rysuj na mapie

Do tej pory udało Ci się utworzyć mapę Sydney, która wyświetla markery popularnych miejsc turystycznych i obsługuje interakcje użytkownika. W ostatnim kroku tego ćwiczenia użyjesz funkcji rysowania interfejsu Maps JavaScript API, aby dodać do mapy przydatną funkcję.

Wyobraź sobie, że z tej mapy będą korzystać użytkownicy, którzy chcą zwiedzić Sydney. Przydatną funkcją byłoby wizualizowanie promienia wokół znacznika po jego kliknięciu. Dzięki temu użytkownik będzie mógł łatwo sprawdzić, jakie inne miejsca znajdują się w pobliżu klikniętego znacznika.

Interfejs Maps JavaScript API zawiera zestaw funkcji do rysowania na mapie kształtów, takich jak kwadraty, wielokąty, linie i okręgi. Następnie wyrenderujesz okrąg, aby po kliknięciu znacznika wyświetlić promień 800 metrów (około pół mili).

  1. Narysuj okrąg za pomocą google.maps.Circle.

    Funkcje rysowania w interfejsie Maps JavaScript API zapewniają szeroki zakres opcji dotyczących wyglądu rysowanego obiektu na mapie. Aby wyrenderować okrągły promień, zadeklaruj zestaw opcji dla okręgu, takich jak kolor, grubość linii, miejsce, w którym okrąg ma być wyśrodkowany, i jego promień, a następnie utwórz nową instancję google.maps.Circle, aby utworzyć nowy okrąg:
     function drawCircle(map, location) {
   const circleOptions = {
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 1,
     map: map,
     center: location,
     radius: 800
   }
   const circle = new google.maps.Circle(circleOptions);
   return circle;
 }
  2. Narysuj okrąg po kliknięciu znacznika.

     Aby narysować okrąg, gdy użytkownik kliknie znacznik, wystarczy wywołać funkcję drawCircle() napisaną powyżej z wywołania zwrotnego odbiornika kliknięć w addPanToMarker() i przekazać jej mapę oraz lokalizację znacznika.

    Zwróć uwagę, że dodano też instrukcję warunkową, która wywołuje funkcję circle.setMap(null). Jeśli użytkownik kliknie inny znacznik, usunie to wcześniej wyrenderowane koło z mapy, dzięki czemu nie będzie ona pokryta kołami podczas eksplorowania.

    Funkcja addPanToMarker() powinna wyglądać mniej więcej tak:
     function addPanToMarker(map, markers) {
   let circle;
   markers.map(marker => {
     marker.addListener('click', event => {
       const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
       map.panTo(location);
       if (circle) {
         circle.setMap(null);
       }
       circle = drawCircle(map, location);
     });
   });
 }

Wszystko gotowe Otwórz przeglądarkę i kliknij jeden ze znaczników. Powinien się wokół niego wyświetlić okrąg o określonym promieniu:

254baef70c3ab4d5.png

11. Gratulacje

Udało Ci się utworzyć pierwszą aplikację internetową za pomocą Google Maps Platform, w tym załadować interfejs Maps JavaScript API, załadować mapę, pracować ze znacznikami, sterować mapą i rysować na niej oraz dodawać interakcje użytkownika.

Aby zobaczyć gotowy kod, otwórz ukończony projekt w katalogu /solutions.

Co dalej?

W tym ćwiczeniu z programowania omówiliśmy podstawowe możliwości interfejsu Maps JavaScript API. Następnie spróbuj dodać do mapy niektóre z tych funkcji:

  • Zmień typ mapy, aby wyświetlić mapy satelitarne, hybrydowe i topograficzne.
  • Włącz lokalizację, aby wczytać mapę w różnych językach.
  • Dostosuj inne interakcje użytkownika, takie jak powiększanie i elementy sterujące mapą.
  • Dodaj okna informacyjne, aby wyświetlać informacje po kliknięciu znaczników.
  • Zapoznaj się z dodatkowymi bibliotekami dostępnymi w Maps JavaScript API, które umożliwiają korzystanie z dodatkowych funkcji, takich jak Miejsca, rysowanie i wizualizacja.

Aby dowiedzieć się więcej o sposobach korzystania z Google Maps Platform w internecie, kliknij te linki: