Pierwsze kroki

W tym samouczku pokażemy Ci, jak utworzyć pierwszy program JavaScript z użyciem fotorealistycznych map 3D w języku JavaScript Map Google. Jest to proste okno, w którym widać z góry most Golden Gate Bridge i przylądek Marin Headlands w tle.

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

Konfigurowanie środowiska

Zanim zaczniesz pisać kod, musisz skonfigurować środowisko obsługujące JavaScript. W tym samouczku jako środowisko będzie używana przeglądarka internetowa. Wszystkie nowoczesne przeglądarki mają wbudowaną obsługę JavaScriptu, 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).

Napisz stronę HTML

Na początek utwórz stronę internetową o podstawowej strukturze HTML:

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

Dodaj kod JavaScript

Następnie dodasz kod JavaScript, by wczytać mapę. Kod zawiera 2 elementy:

  • gmp-map-3d zawiera parametry używane do inicjowania początkowego położenia i widoku kamery.
  • script zawiera wywołanie do wczytania interfejsu Maps JavaScript API. Pamiętaj, aby zastąpić YOUR_KEY 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" tilt="67.5"></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ć dane wyjściowe, wykonaj następujące kroki:

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

Gratulacje! Właśnie udało Ci się napisać program wykorzystujący fotorealistyczne mapy 3D utworzone przez Google Maps JavaScript API.

Dalsze kroki