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 JavaScript. 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. Wszystkie nowoczesne przeglądarki 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 JavaScript

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=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&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ć jej wynik, wykonaj te czynności:

  1. Zapisz utworzony plik HTML.
  2. Otwórz plik w przeglądarce (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 firmy Google.

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