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.
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:
- Interfejs Map JavaScript API jest wywoływany asynchronicznie. Funkcja wywołania zwrotnego służy do informowania o załadowaniu interfejsu API.
- Prezentację mapy definiuje się za pomocą elementu niestandardowego
<gmp-map>
. - Właściwości mapy definiuje się, określając atrybuty w elemencie niestandardowym
<gmp-map>
. - 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.
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.
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
- Poproś o nowe funkcje i zgłoś błędy w narzędziu do śledzenia problemów w interfejsie API JavaScript Map Google.
- Zapoznaj się z rozszerzoną biblioteką komponentów z komponentami internetowymi wyższego poziomu, takimi jak omówienie miejsc.