Rozpocznij

Wybierz platformę: Android iOS JavaScript

Z tego samouczka dowiesz się, jak utworzyć pierwszą aplikację w JavaScript przy użyciu Map 3D w Mapach w JavaScripcie. Będzie to podstawowe okno, w którym wyświetli się widok z góry na most Golden Gate z Marin Headlands w tle.

Po ukończeniu samouczka w środowisku programistycznym powinna się wyświetlić ta mapa:

Konfigurowanie środowiska

Zanim zaczniesz pisać kod, musisz skonfigurować środowisko, w którym będzie działać JavaScript. W tym samouczku jako środowiska będziesz używać przeglądarki internetowej. Wszystkie nowoczesne przeglądarki internetowe mają wbudowaną obsługę JavaScript, więc nie musisz instalować żadnego dodatkowego oprogramowania.

  1. Otwórz wybrany edytor tekstu.
  2. Utwórz nowy plik i zapisz go z rozszerzeniem .html (np. hello-p3djs.html).

Pisanie strony HTML

Na początek utwórz stronę internetową z podstawową strukturą HTML:

<html>
  <head>
      <title>Map</title>
  </head>
  <body>
      <!-- Your JavaScript code will go here -->
  </body>
</html>

Dodawanie JavaScriptu

Następnie dodaj niestandardowy element HTML, aby wczytać mapę. Kod zawiera 2 elementy:

  • gmp-map-3d zawiera parametry używane do inicjowania początkowej pozycji i widoku kamery.
  • script zawiera wywołanie wczytujące interfejs Maps JavaScript API. Pamiętaj, aby zastąpić YOUR_KEY kluczem interfejsu API.

<html>
    <head>
        <title>Map</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=GOOGLE_MAPS_API_KEY&libraries=maps3d"></script>
    </head>
    <body>
        <gmp-map-3d center="37.7704,-122.3985,500" tilt="67.5" mode="hybrid">
        </gmp-map-3d>
    </body>
</html>

Uruchamianie aplikacji

Aby uruchomić aplikację i zobaczyć wynik:

  1. Zapisz utworzony plik HTML.
  2. Otwórz plik w przeglądarce internetowej (możesz kliknąć go dwukrotnie, przeciągnąć do okna przeglądarki lub kliknąć prawym przyciskiem myszy i wybrać „Otwórz za pomocą”).
  3. W oknie przeglądarki powinna się wyświetlić mapa.

Gratulacje! Właśnie napisano aplikację korzystającą z Map 3D w interfejsie Maps JavaScript API.

Dalsze kroki

  • Twórz bardziej złożone mapy 3D, korzystając z istniejących przykładów Google.
  • Poznaj pełny potencjał Map 3D w interfejsie Maps JavaScript API, czytając dokumentację.