Dodawanie znacznika Google Map w języku JavaScript

Wprowadzenie

Ten samouczek pokazuje, jak dodać do internetu prostą mapę Google za pomocą znacznika stronę. Jest odpowiedni dla osób początkujących i średnio zaawansowanych w zakresie HTML i CSS, i znajdować się w języku JavaScript.

Poniżej znajduje się mapa, którą utworzysz za pomocą tego samouczka. Znacznik znajduje się w Uluru (znane też jako Ayers Rock) w Park Narodowy Uluru-Kata Tjuta.

Pierwsze kroki

Tworzenie mapy Google ze znacznikiem na stronie internetowej odbywa się w 3 krokach:

  1. Uzyskiwanie klucza interfejsu API
  2. Tworzenie strony HTML
  3. Dodawanie mapy ze znacznikiem

Potrzebujesz przeglądarki. Wybierz dobrze znany adres, np. Google Chrome (zalecane), Firefox, Safari lub Edge, w zależności od używanej platformy listę obsługiwanych przeglądarek.

Krok 1. Uzyskaj klucz interfejsu API

Ta sekcja wyjaśnia, jak uwierzytelnić aplikację w Maps JavaScript API za pomocą własnego klucza interfejsu API.

Aby uzyskać klucz interfejsu API, wykonaj te czynności:

  1. Przejdź do Konsola Google Cloud.

  2. Utwórz lub wybierz projekt.

  3. Kliknij Dalej, aby włączyć ten interfejs API i powiązane usługi.

  4. Na stronie Dane logowania uzyskaj klucz interfejsu API (i ustaw go ograniczeń). Uwaga: jeśli masz już klucz interfejsu API bez ograniczeń lub klucz z ograniczeniami przeglądarki, możesz użyć tego klucza.

  5. Aby zapobiec kradzieży limitu i zabezpieczyć klucz interfejsu API, zapoznaj się z artykułem Korzystanie z kluczy interfejsu API

  6. Włącz płatności. Zobacz Korzystanie i płatności .

  7. Po uzyskaniu klucza interfejsu API dodaj go do tego fragmentu kodu, klikając „YOUR_API_KEY”. Skopiuj i wklej tag skryptu programu rozruchowego, by użyć go samodzielnie stronę internetową.

    <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 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>

    <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>

index.html

Pamiętaj, że jest to bardzo podstawowa strona z nagłówkiem 3. poziomu (h3) oraz pojedynczy element div. Do strony internetowej możesz dodać dowolną treść.

Zrozumienie kodu

Na tym etapie naszego przykładu mamy:

  • Zadeklarowano aplikację jako HTML5, używając deklaracji !DOCTYPE html.
  • Utworzono element div o nazwie „map” przytrzymując mapę.
  • Wczytano interfejs Maps JavaScript API przy użyciu programu wczytywania.

Zadeklarowanie aplikacji jako HTML5

Zalecamy zadeklarowanie prawdziwego atrybutu DOCTYPE w aplikacji internetowej. W tych przykładach zadeklarowaliśmy nasze aplikacje jako HTML5, używając metody prosty element HTML5 DOCTYPE, jak pokazano poniżej:

<!DOCTYPE html>

Większość obecnych przeglądarek będzie renderować treści zadeklarowane za pomocą tego atrybutu DOCTYPE w „trybie standardowym” co oznacza, że aplikacja powinna być i integracja z różnymi przeglądarkami. Urządzenie DOCTYPE zostało zaprojektowane tak, aby płynnie się zmniejszało. przeglądarki, które go nie rozumieją, zignorują go i użyją „trybu osobliwości” do ich treści.

Pamiętaj, że niektóre elementy CSS, które działają w trybie osobliwości, są nieprawidłowe w i trybu standardowego. Konkretnie: wszystkie rozmiary określone procentowo muszą dziedziczyć z nadrzędnych elementów blokowych, a żaden z tych elementów nadrzędnych nie mają określone wymiary, przyjmuje się, że mają one rozmiar 0 x 0 pikseli. Dla: z tego powodu dołączamy tę deklarację style:

<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 w tym celu tworzymy element div i uzyskujemy odniesienie do tego obiektowy model dokumentu (DOM) przeglądarki.

Poniższy kod określa obszar strony mapy Google.

<!--The div element for the map -->
<div id="map"></div>

Na tym etapie samouczka div jest wyświetlana jako tylko szary blok, ponieważ Nie dodano jeszcze mapy. Poniższy kod opisuje CSS, który ustawia 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). Ustaw parametr div szerokości i wysokości do większej niż 0 piks., aby mapa była widoczna. W tym wielkość liter, div ma wysokość 400 pikseli, a szerokość 100% na całą szerokość strony. Pamiętaj, że elementy div zazwyczaj mają szerokość. od elementu nadrzędnego, a puste elementy div mają zwykle 0 wysokości. Do tego celu dlatego wysokość w elemencie div musisz zawsze ustawiać bezpośrednio.

Wczytaj interfejs Maps JavaScript API

Moduł wczytywania 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 pobierania klucza interfejsu API znajdziesz w sekcji Krok 3. Wygeneruj klucz interfejsu API. o własny klucz interfejsu API.

Krok 3. Dodaj mapę ze znacznikiem

Z tej sekcji dowiesz się, jak wczytać interfejs Maps JavaScript API na swoim stronę internetową oraz jak napisać własny JavaScript za pomocą interfejsu API do dodawania 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();
index.ts

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();
index.js

W powyższym kodzie biblioteki Map i AdvancedMarkerView są ładowane podczas funkcja initMap() jest wywoływana.

Zrozumienie kodu

Na tym etapie samouczka:

  • Zdefiniowano funkcję JavaScriptu, która tworzy mapę w elemencie div.
  • Utworzono AdvancedMarkerElement, aby dodać znacznik do mapy.

Dodaj mapę

Poniższy kod tworzy nowy obiekt Map Google i dodaje właściwości do obiektu mapę, w tym środek i powiększenie. Zobacz dokumentację: inna usługa .

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',
  }
);
index.ts

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",
});

index.js

Dla każdej mapy wymagane są 2 opcje: center i zoom. W powyższych new Map() tworzy nowy obiekt Map Google. Właściwość center informuje wyśrodkować mapę.

Właściwość zoom określa poziom powiększenia mapy. Powiększenie: 0 to najniższa wartość. powiększania i wyświetla całą Ziemię. Zwiększ wartość powiększenia, aby powiększyć Earth w wyższych rozdzielczościach.

Oferowanie mapy całej Ziemi jako jednego zdjęcia wymagałoby albo lub mapy o bardzo niskiej rozdzielczości. W efekcie zdjęcia map w Mapach Google i Maps JavaScript API są podzielone na „kafelki” i „poziomy powiększenia”. Przy małym powiększeniu niewielki zbiór fragmentów mapy obszar; przy większym powiększeniu kafelki mają wyższą rozdzielczość i mniejszego obszaru. Poniższa lista zawiera przybliżony poziom szczegółowości które można uzyskać przy każdym powiększeniu:

  • 1: Świat
  • 5: Ląd lub kontynent
  • 10: Miasto
  • 15: Ulice
  • 20. Budynki

Poniższe trzy zdjęcia pokazują tę samą lokalizację Tokio przy powiększeniu 0. 7 i 18.

Dodaj znacznik

Poniższy kod umieszcza znacznik na mapie. Właściwość position ustawia pozycji znacznika.

TypeScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: 'Uluru'
});
index.ts

JavaScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: "Uluru",
});
index.js

Uzupełnij 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();
index.ts

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();
index.js

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;
}

style.css

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>
index.html

Zobacz próbkę

Więcej informacji o znacznikach:

Wskazówki i rozwiązywanie problemów

  • Więcej informacji o uzyskiwaniu szerokości i długości geograficznej ze współrzędnych geograficznych lub przekształcenie adresu we współrzędne geograficzne.
  • Możesz doprecyzować opcje, takie jak styl i właściwości, aby dostosować mapę. Dla: aby dowiedzieć się więcej o dostosowywaniu map, przeczytaj przewodniki styl rysunku na mapie.
  • Użyj konsoli narzędzi dla programistów w przeglądarce, by przetestować i uruchomić kod, odczytywanie raportów o błędach i rozwiązywanie problemów 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 kroki, aby poznać szerokość geograficzną długości geograficznej lokalizacji w Mapach Google.

    1. Otwórz Mapy Google w przeglądarce.
    2. Kliknij prawym przyciskiem myszy dokładną lokalizację na mapie, której chcesz wyświetlić. .
    3. Z wyświetlonego menu kontekstowego wybierz Co tu jest. U dołu mapy pojawi się karta. Znajdź szerokość geograficzną długości i długości geograficznej w ostatnim wierszu karty.

  • Możesz przekonwertować adres na współrzędne geograficzne za pomocą Usługa geokodowania. Przewodniki dla programistów zawierają szczegółowe informacje jak zacząć korzystać z usługi geokodowania.