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 widoczną w tle Marin Headlands.

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