Rozpocznij

W tym samouczku dowiesz się, jak utworzyć swój pierwszy program JavaScriptu za pomocą fotorealistycznych map 3D w Mapach JavaScript: proste okno, które wyświetla widok z lotu na Most Golden Gate z widokiem na Marin Headlands w tle.

Po zakończeniu samouczka w swoim środowisku programistycznym powinieneś zobaczyć taką mapę:

Konfigurowanie środowiska

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

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

Tworzenie strony HTML

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

<!DOCTYPE html>
<html>
<head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
</head>
<body>
    <!-- Your JavaScript code will go here -->
</body>
</html>

Dodawanie kodu JavaScript

Następnie dodaj kod JavaScriptu, który 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 do załadowania interfejsu Maps JavaScript API. Pamiętaj, aby zastąpić YOUR_KEY swoim kluczem interfejsu API.
<!DOCTYPE html>
<html>
  <head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>

    <style>
      html,
      body {
        height:100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <gmp-map-3d mode="hybrid" center="37.841157, -122.551679" range="2000" tilt="75" heading="330"></gmp-map-3d>
    <script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=alpha&libraries=maps3d"></script>
  </body>
</html>

Uruchamianie programu

Aby uruchomić program i zobaczyć 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 napisałeś program korzystający z interfejsu Maps JavaScript API firmy Google do tworzenia fotorealistycznych map 3D.

Dalsze kroki

  • Utwórz bardziej skomplikowane mapy 3D, korzystając z dostępnych w Google próbek.
  • Aby w pełni wykorzystać możliwości map 3D w interfejsie Maps JavaScript API, przeczytaj dokumentację.