Wprowadzenie
Z tego samouczka dowiesz się, jak dodać do strony internetowej prostą mapę Google ze znacznikiem. Jest on przeznaczony dla osób, które mają podstawową lub średnio zaawansowaną wiedzę o HTML-u i CSS-ie oraz niewielką wiedzę o JavaScript.
Poniżej znajduje się mapa, którą utworzysz w tym samouczku. Znacznik znajduje się w Uluru (znanym też jako Ayers Rock) w Parku Narodowym Uluru-Kata Tjuta.
Pierwsze kroki
Aby utworzyć mapę Google ze znacznikiem na stronie internetowej, wykonaj 3 czynności:
Potrzebujesz przeglądarki. Wybierz znaną przeglądarkę, np. Google Chrome (zalecana), Firefox, Safari lub Edge, w zależności od platformy z listy obsługiwanych przeglądarek.
Krok 1. Uzyskaj klucz interfejsu API
W tej sekcji dowiesz się, jak uwierzytelnić aplikację w interfejsie Maps JavaScript API za pomocą własnego klucza interfejsu API.
Aby uzyskać klucz interfejsu API:
Otwórz konsolę Google Cloud.
Utwórz lub wybierz projekt.
Kliknij Dalej, aby włączyć interfejs API i powiązane z nim usługi.
Na stronie Dane logowania uzyskaj klucz interfejsu API (i ustaw ograniczenia klucza interfejsu API). Uwaga: jeśli masz już klucz interfejsu API bez ograniczeń lub klucz z ograniczeniami dotyczącymi przeglądarki, możesz go użyć.
Aby zapobiec kradzieży limitu i zabezpieczyć klucz interfejsu API, zapoznaj się z artykułem Korzystanie z kluczy interfejsu API.
Włącz płatności. Więcej informacji znajdziesz w artykule Wykorzystanie i rozliczenia.
Gdy uzyskasz klucz interfejsu API, dodaj go do tego fragmentu kodu, klikając „YOUR_API_KEY”. Skopiuj i wklej tag skryptu programu rozruchowego, aby użyć go na własnej stronie internetowej.
<script> (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ key: "YOUR_API_KEY", v: "weekly", // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script>
Krok 2. Utwórz stronę HTML
Oto kod podstawowej strony internetowej HTML:
<!doctype html> <!-- @license Copyright 2019 Google LLC. All Rights Reserved. SPDX-License-Identifier: Apache-2.0 --> <html> <head> <title>Add Map</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <h3>My Google Maps Demo</h3> <!--The div element for the map --> <div id="map"></div> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html> Pamiętaj, że jest to bardzo prosta strona z nagłówkiem poziomu 3 (h3) i jednym elementem div. Możesz dodać do strony dowolną treść.
Zrozumienie kodu
Na tym etapie przykładu mamy:
- zadeklarować aplikację jako HTML5 za pomocą deklaracji
!DOCTYPE html. - Utworzono element div o nazwie „map”, który będzie zawierać mapę.
- Interfejs Maps JavaScript API został wczytany za pomocą programu wczytującego bootstrap.
Deklarowanie aplikacji jako HTML5
Zalecamy zadeklarowanie wartości DOCTYPE w aplikacji internetowej. W przykładach poniżej zadeklarowaliśmy nasze aplikacje jako HTML5 za pomocą prostego kodu HTML5 DOCTYPE, jak pokazano poniżej:
<!DOCTYPE html>
Większość obecnych przeglądarek renderuje treści zadeklarowane w ten sposób w DOCTYPE„trybie standardowym”, co oznacza, że aplikacja powinna być bardziej zgodna z różnymi przeglądarkami. DOCTYPE jest też zaprojektowany tak, aby działać w sposób niezakłócony; przeglądarki, które go nie obsługują, będą go ignorować i wyświetlać treści w „trybie zgodności”.
Pamiętaj, że niektóre style CSS działające w trybie zgodności nie są prawidłowe w trybie standardów. W szczególności wszystkie rozmiary oparte na procentach muszą być dziedziczone z nadrzędnych elementów blokowych, a jeśli którykolwiek z tych elementów nadrzędnych nie określa rozmiaru, przyjmuje się, że ma on rozmiar 0 x 0 pikseli. Z tego powodu dodajemy to style oświadczenie:
<style> #map { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; } </style>Tworzenie elementu div
Aby mapa wyświetlała się na stronie internetowej, musimy zarezerwować dla niej miejsce. Zazwyczaj robimy to, tworząc nazwany element div i uzyskując do niego odniesienie w modelu DOM przeglądarki.
Poniższy kod określa obszar strony, na którym ma się wyświetlać mapa Google.
<!--The div element for the map --> <div id="map"></div>
Na tym etapie samouczka element div jest widoczny jako szary blok, ponieważ nie dodano jeszcze mapy. Poniższy kod opisuje CSS, który ustawia rozmiar i kolor elementu div.
/* Set the size of the div element that contains the map */ #map { height: 400px; /* The height is 400 pixels */ width: 100%; /* The width is the width of the web page */ }
W powyższym kodzie element style określa rozmiar div mapy. Ustaw divszerokość i wysokość na wartość większą niż 0 pikseli, aby mapa była widoczna. W tym przypadku element div ma wysokość 400 pikseli i szerokość 100%, aby wyświetlać się na całej szerokości strony internetowej. Pamiętaj, że elementy div zwykle przyjmują szerokość elementu zawierającego, a puste elementy div mają zwykle wysokość 0. Z tego powodu zawsze musisz wyraźnie ustawić wysokość w przypadku elementu div.
Wczytywanie interfejsu Maps JavaScript API
Program rozruchowy przygotowuje interfejs Maps JavaScript API do wczytania (żadne biblioteki nie są wczytywane, dopóki nie zostanie wywołana funkcja importLibrary()).
<script> (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ key: "YOUR_API_KEY", v: "weekly", // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script>
Instrukcje uzyskiwania własnego klucza interfejsu API znajdziesz w kroku 3: Uzyskiwanie klucza interfejsu API.
Krok 3. Dodaj mapę ze znacznikiem
W tej sekcji dowiesz się, jak wczytać interfejs Maps JavaScript API na stronę internetową i jak napisać własny kod JavaScript, który używa tego interfejsu do dodawania mapy ze znacznikiem.
TypeScript
// Initialize and add the map let map; async function initMap(): Promise<void> { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // The map, centered at Uluru map = new Map( document.getElementById('map') as HTMLElement, { zoom: 4, center: position, mapId: 'DEMO_MAP_ID', } ); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: 'Uluru' }); } initMap();
JavaScript
// Initialize and add the map let map; async function initMap() { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // The map, centered at Uluru map = new Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", }); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", }); } initMap();
W powyższym kodzie biblioteki Map i AdvancedMarkerElement są wczytywane, gdy wywoływana jest funkcja initMap().
Zrozumienie kodu
Na tym etapie samouczka mamy:
- zdefiniowano funkcję JavaScript, która tworzy mapę w elemencie div;
- Utworzono
AdvancedMarkerElement, aby dodać znacznik do mapy.
Dodawanie mapy
Poniższy kod tworzy nowy obiekt Map Google i dodaje do niego właściwości, w tym środek i poziom powiększenia. Zapoznaj się z dokumentacją dotyczącą innych opcji usługi.
TypeScript
// The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // The map, centered at Uluru map = new Map( document.getElementById('map') as HTMLElement, { zoom: 4, center: position, mapId: 'DEMO_MAP_ID', } );
JavaScript
// The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // The map, centered at Uluru map = new Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", });
Każda mapa musi zawierać 2 wymagane opcje: center i zoom. W powyższym kodzie new Map() tworzy nowy obiekt Map Google. Właściwość center określa, gdzie interfejs API ma wyśrodkować mapę.
Właściwość zoom określa poziom powiększenia mapy. Powiększenie: 0 to najmniejsze powiększenie, które wyświetla całą Ziemię. Ustaw wyższą wartość powiększenia, aby powiększyć Ziemię w wyższej rozdzielczości.
Oferowanie mapy całej Ziemi jako jednego obrazu wymagałoby ogromnej mapy lub małej mapy o bardzo niskiej rozdzielczości. W rezultacie obrazy map w Mapach Google i interfejsie Maps JavaScript API są podzielone na „kafelki” i „poziomy powiększenia”. Przy niskim poziomie powiększenia niewielki zestaw kafelków mapy obejmuje duży obszar, a przy wyższym poziomie powiększenia kafelki mają wyższą rozdzielczość i obejmują mniejszy obszar. Poniższa lista pokazuje przybliżony poziom szczegółowości na poszczególnych poziomach powiększenia:
- 1: Świat
- 5. Ląd lub kontynent
- 10. Miasto
- 15. Ulice
- 20. Budynki
Poniższe 3 obrazy przedstawiają tę samą lokalizację w Tokio na poziomach powiększenia 0, 7 i 18.
Dodaj znacznik
Poniższy kod umieszcza znacznik na mapie. Właściwość position określa pozycję znacznika.
TypeScript
// The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: 'Uluru' });
JavaScript
// The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", });
Pełny przykładowy kod
Pełny przykładowy kod znajdziesz tutaj:
TypeScript
// Initialize and add the map let map; async function initMap(): Promise<void> { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // The map, centered at Uluru map = new Map( document.getElementById('map') as HTMLElement, { zoom: 4, center: position, mapId: 'DEMO_MAP_ID', } ); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: 'Uluru' }); } initMap();
JavaScript
// Initialize and add the map let map; async function initMap() { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // The map, centered at Uluru map = new Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", }); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", }); } initMap();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Add Map</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <h3>My Google Maps Demo</h3> <!--The div element for the map --> <div id="map"></div> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>Wypróbuj przykład
Więcej informacji o markerach:
Wskazówki i rozwiązywanie problemów
- Dowiedz się więcej o uzyskiwaniu współrzędnych geograficznych lub przekształcaniu adresu w współrzędne geograficzne.
- Możesz dostosować mapę, zmieniając opcje takie jak styl i właściwości. Więcej informacji o dostosowywaniu map znajdziesz w przewodnikach dotyczących stylizowania i rysowania na mapie.
- Użyj konsoli Narzędzi dla programistów w przeglądarce, aby testować i uruchamiać kod, odczytywać raporty o błędach i rozwiązywać problemy z kodem.
- Aby otworzyć konsolę w Chrome, użyj tych skrótów klawiszowych:
Command+Option+J (na Macu) lub Ctrl+Shift+J (w systemie Windows). Aby uzyskać współrzędne geograficzne (szerokość i długość) lokalizacji w Mapach Google, wykonaj te czynności:
- Otwórz Mapy Google w przeglądarce.
- Kliknij prawym przyciskiem myszy dokładną lokalizację na mapie, dla której chcesz uzyskać współrzędne.
- W wyświetlonym menu kontekstowym wybierz Co tu jest. U dołu ekranu wyświetli się karta. W ostatnim wierszu karty znajdź współrzędne szerokości i długości geograficznej.
Za pomocą usługi geokodowania możesz przekonwertować adres na współrzędne geograficzne. Szczegółowe informacje o rozpoczynaniu korzystania z usługi Geocoding znajdziesz w przewodnikach dla deweloperów.