Rozpocznij

Wybierz platformę: Android iOS JavaScript

Z tego samouczka dowiesz się, jak utworzyć pierwszą aplikację w JavaScripcie korzystającą z map 3D w Mapach w JavaScripcie: podstawowe okno wyświetlające 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 będziesz używać przeglądarki internetowej jako środowiska. 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).

Tworzenie 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 kodu JavaScript

Następnie dodasz niestandardowy element HTML, aby 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 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ć dane wyjściowe, 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. Mapa powinna być widoczna w oknie przeglądarki.

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

Dalsze kroki

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