Wstęp
Ten samouczek pokazuje, jak dodać do strony internetowej prostą mapę Google ze znacznikiem. Spełnia wymagania osób, które znają HTML i CSS na poziomie podstawowym lub średnio zaawansowanym, a także pewną znajomość języka JavaScript.
Poniżej znajduje się mapa, którą utworzysz w tym samouczku. Znacznik znajduje się w Uluru (znanej też jako Ayers Rock) w Parku Narodowym Uluru-Kata Tjuta.
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> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <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 fragment
Wprowadzenie
Aby utworzyć mapę Google ze znacznikiem na stronie internetowej, trzeba wykonać trzy czynności:
Potrzebujesz przeglądarki. Z listy obsługiwanych przeglądarek wybierz dobrze znany system, na przykład Google Chrome (zalecane), Firefox, Safari lub Edge, w zależności od używanej platformy.
Krok 1. Utwórz stronę HTML
Oto kod podstawowej strony internetowej w języku HTML:
<!doctype html> <!-- @license Copyright 2019 Google LLC. All Rights Reserved. SPDX-License-Identifier: Apache-2.0 --> <html> <head> <title>Add Map</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <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 to bardzo prosta strona z nagłówkiem trzecim (h3
) i jednym elementem div
. Do strony internetowej możesz dodać dowolną treść.
Interpretacja kodu
Poniższy kod tworzy stronę HTML składającą się z nagłówka i treści.
<html> <head> </head> <body> </body> </html>
Za pomocą poniższego kodu możesz dodać nagłówek poziomu trzeciego nad mapą.
<h3>My Google Maps Demo</h3>
Poniższy kod określa obszar strony, którego dotyczy mapa Google.
<!--The div element for the map --> <div id="map"></div>
Na tym etapie samouczka obiekt div
jest wyświetlany jako szary blok, ponieważ nie dodano jeszcze mapy. Poniższy kod opisuje usługę porównywania cen, która 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
ustawia rozmiar mapy div
. Aby mapa była widoczna, ustaw szerokość i wysokość pola div
na wartość większą niż 0 pikseli. W tym przypadku div
ma wysokość 400 pikseli i szerokość 100%, aby wyświetlić całą stronę internetową.
Program wczytywania przygotowuje interfejs Maps JavaScript API do wczytania (biblioteki nie są wczytywane do chwili wywołania funkcji 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 pobierania własnego klucza interfejsu API znajdziesz w sekcji Krok 3. Uzyskaj klucz interfejsu API.
Krok 2. Dodaj mapę ze znacznikiem
W tej sekcji dowiesz się, jak wczytać interfejs Maps JavaScript API na swoją stronę internetową i napisać własny kod JavaScript, który korzysta z tego interfejsu API, aby dodać do niej mapę 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 AdvancedMarkerView
są wczytywane po wywołaniu funkcji initMap()
.
Interpretacja kodu
Poniższy kod tworzy nowy obiekt Map Google i dodaje do mapy właściwości, w tym poziom środka i powiększenia. Inne opcje właściwości znajdziesz w dokumentacji.
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", });
W powyższym kodzie new Map()
tworzy nowy obiekt Map Google. Właściwość center
informuje interfejs API, gdzie wyśrodkować mapę.
Dowiedz się więcej o uzyskiwaniu współrzędnych szerokości i długości geograficznej i przekształcaniu adresu na współrzędne geograficzne.
Właściwość zoom
określa poziom powiększenia mapy. Powiększenie: 0 to najniższe powiększenie
i wyświetla całą planetę. Ustaw większą wartość powiększenia,
aby powiększyć widok Ziemi w wyższych rozdzielczościach.
Poniższy kod dodaje znacznik na mapie. Właściwość position
określa położenie 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", });
Więcej informacji o znacznikach:
Krok 3. Uzyskaj klucz interfejsu API
Z tej sekcji dowiesz się, jak uwierzytelnić aplikację w interfejsie Maps JavaScript API za pomocą własnego klucza interfejsu API.
Aby uzyskać klucz interfejsu API, wykonaj te czynności:
Otwórz Google Cloud Console.
Utwórz lub wybierz projekt.
Kliknij Dalej, aby włączyć interfejs API i wszystkie powiązane usługi.
Na stronie Dane logowania pobierz klucz interfejsu API (i ustaw ograniczenia dotyczące klucza interfejsu API). Uwaga: jeśli masz 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 sekcją o korzystaniu z kluczy interfejsu API.
Włącz płatności. Więcej informacji znajdziesz w sekcji Korzystanie i płatności.
Skopiuj cały kod tego samouczka z tej strony do edytora tekstu.
Zastąp wartość parametru
key
w adresie URL własnym kluczem interfejsu API (czyli właśnie uzyskanym kluczem interfejsu API).<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>
Zapisz plik z nazwą, która kończy się na
.html
, np.index.html
.Wczytaj plik HTML w przeglądarce, przeciągając go z pulpitu do przeglądarki. W większości systemów operacyjnych można też dwukrotnie kliknąć plik.
Wskazówki i rozwiązywanie problemów
- Możesz dostosowywać opcje takie jak styl i właściwości, aby dostosować mapę. Więcej informacji o dostosowywaniu map znajdziesz w przewodnikach po stylu i rysowaniu na mapie.
- Użyj konsoli Narzędzi dla programistów w przeglądarce, by przetestować i uruchomić kod, przeczytać raporty o błędach i rozwiązać problemy z kodem.
- Aby otworzyć konsolę w Chrome, użyj tych skrótów klawiszowych:
Command+Option+J (Mac) lub Control+Shift+J (Windows). Wykonaj poniższe czynności, aby poznać współrzędne szerokości i długości geograficznej lokalizacji w Mapach Google.
- Otwórz Mapy Google w przeglądarce.
- Kliknij prawym przyciskiem myszy dokładną lokalizację na mapie, dla której potrzebujesz współrzędnych.
- Z menu kontekstowego wybierz Co tu jest. U dołu ekranu wyświetli się karta. W ostatnim wierszu karty znajdź szerokość i długość geograficzną.
Możesz przekonwertować adres na współrzędne geograficzne, korzystając z usługi geokodowania. Przewodniki dla programistów zawierają szczegółowe informacje o pierwszych krokach z usługą Geocoding.