Komponenty internetowe w interfejsie Maps JavaScript API (wersja przedpremierowa)

Komponenty internetowe to popularny standard W3C, który uwzględnia kod HTML, CSS i JS w niestandardowych elementach HTML przeznaczonych do wielokrotnego użytku oraz niestandardowych. Elementy te mogą być przeznaczone do wielokrotnego użytku – od prostych elementów, takich jak wyświetlanie liczby gwiazdek danego miejsca, po bardziej złożone logiki biznesowe. W tym przewodniku opisujemy komponenty sieciowe dostępne w interfejsie Maps JavaScript API.

Więcej informacji o standardzie znajdziesz w artykule Komponenty internetowe.

Odbiorcy

Ta dokumentacja została opracowana, aby umożliwić Ci szybkie rozpoczęcie poznawania i tworzenia aplikacji z komponentami internetowymi. Musisz znać pojęcia programowania w języku HTML i CSS.

Wyświetl mapę

Najprostszym sposobem na poznanie komponentów sieciowych jest skorzystanie z przykładu. Poniższy przykład pokazuje mapę okolicy San Jose.

mapa okolicy San Jose

HTML

<html>
  <head>
    <title>Simple Map</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=maps,marker&v=beta">
    </script>

    <script>
      function initMap() {
        console.log('Maps JavaScript API loaded.');
      }
    </script>

  </head>
  <body>
    <gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID"></gmp-map>
  </body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

W tym przykładzie warto zwrócić uwagę na kilka rzeczy:

  1. Interfejs Map JavaScript API jest wywoływany asynchronicznie. Funkcja wywołania zwrotnego służy do informowania o załadowaniu interfejsu API.
  2. Prezentację mapy definiuje się za pomocą elementu niestandardowego <gmp-map>.
  3. Właściwości mapy definiuje się, określając atrybuty w elemencie niestandardowym <gmp-map>.
  4. Styl można stosować w elementach niestandardowych lub zadeklarować w osobnym pliku CSS.

Określanie stylu mapy podstawowej

Identyfikator mapy to identyfikator powiązany z określonym stylem mapy lub funkcją. Aby skorzystać z opcjonalnych funkcji konfiguracji w chmurze, zastąp styl DEMO_MAP_ID map opartych na chmurze własnym identyfikatorem mapy. Aby dowiedzieć się, jak utworzyć identyfikator mapy i skonfigurować styl niestandardowy, zapoznaj się z informacjami o stylu map opartych na chmurze.

Dodawanie znaczników do mapy

Tak jak można zagnieżdżać wbudowane tagi HTML, aby tworzyć złożone hierarchie treści, można też zagnieżdżać znaczniki <gmp-advanced-marker> w elemencie, aby wyświetlać co najmniej 1 znacznik mapy.

mapa ze znacznikami

HTML

<html>
  <head>
    <title>Simple Map with Markers</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap&libraries=maps,marker&v=beta">
    </script>

    <script>
      function initMap() {
        console.log('Maps JavaScript API loaded.');
      }
    </script>

  </head>
  <body>
    <gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID">
      <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA"></gmp-advanced-marker>
      <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA"></gmp-advanced-marker>
    </gmp-map>
  </body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

W elemencie niestandardowym <gmp-map> dodaliśmy 2 elementy <gmp-advanced-marker>. Tekst właściwości title zawiera dodatkowy tekst wyświetlany po najechaniu kursorem i etykietę ułatwień dostępu dla określonego elementu.

Zdarzenia JavaScript

Główną zaletą komponentów sieciowych jest łatwość obsługi. Wystarczy kilka wierszy kodu, aby wyświetlić mapę, nawet jeśli zna się na języku JavaScript lub zaawansowanym programowaniu. Po zaimplementowaniu kod jest zgodny ze znanymi wzorcami innych elementów HTML. Można na przykład użyć natywnego systemu obsługi zdarzeń przeglądarki do reagowania na działania mapy lub znacznika zaawansowanego, takie jak kliknięcie znacznika.

zdarzenie kliknięcia znacznika

HTML

<html>
<head>
  <title>Google Maps - Marker Click Example</title>
  <link rel="stylesheet" href="style.css" type="text/css">

  <script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap&libraries=maps,marker&v=beta">
  </script>

  <script>
    function initMap() {
      console.log('Maps JavaScript API loaded.');

      const advancedMarkers = document.querySelectorAll("#marker-click-event-example gmp-advanced-marker");
      for (const advancedMarker of advancedMarkers) {
        customElements.whenDefined(advancedMarker.localName).then(async () => {
          advancedMarker.addEventListener('gmp-click', async () => {
            const {InfoWindow} = await google.maps.importLibrary("maps");
            const infoWindow = new InfoWindow({
              content: advancedMarker.title
            });
            infoWindow.open({
              anchor: advancedMarker
            });
          });
        });
      }
    }
  </script>
</head>
<body>

<gmp-map id="marker-click-event-example" center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID">
  <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA"></gmp-advanced-marker>
  <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA"></gmp-advanced-marker>
</gmp-map>

</body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

W tym przykładzie initMap reprezentuje wymaganą funkcję wywołania zwrotnego po całkowitym wczytaniu interfejsu Maps JavaScript API. Kod łączy detektory do każdego znacznika i wyświetla okno informacyjne po kliknięciu każdego znacznika.

Co dalej?