W tym samouczku pokazujemy, jak utworzyć pierwszy program JavaScript z użyciem fotorealistycznych map 3D w JavaScripcie: proste okno, które wyświetla z góry widok na most Golden Gate oraz przylądek Marin Headlands w tle.
Po ukończeniu samouczka w środowisku programistycznym powinna wyświetlić się następująca mapa:
Konfigurowanie środowiska
Zanim zaczniesz pisać kod, musisz skonfigurować środowisko do obsługi JavaScriptu. W tym samouczku Twoim środowiskiem będzie przeglądarka internetowa. Wszystkie nowoczesne przeglądarki mają wbudowaną obsługę języka JavaScript, więc nie trzeba instalować dodatkowego oprogramowania.
- Otwórz wybrany edytor tekstu.
- Utwórz nowy plik i zapisz go z rozszerzeniem
.html
(np.hello-p3djs.html
).
Pisanie strony HTML
Zacznij od utworzenia strony internetowej 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 dodaj 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.- Plik
script
zawiera wywołanie umożliwiające wczytanie 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" 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>
Uruchom program
Aby uruchomić program i wyświetlić dane wyjściowe, wykonaj te czynności:
- Zapisz utworzony plik HTML.
- Otwórz plik w przeglądarce (kliknij go dwukrotnie, przeciągnij do okna przeglądarki lub kliknij prawym przyciskiem myszy i wybierz „Otwórz za pomocą”).
- Mapa powinna wyświetlić się w oknie przeglądarki.
Gratulacje! Właśnie udało Ci się napisać program przy użyciu interfejsu Maps JavaScript API Google Maps JavaScript API. Fotorealistyczne mapy 3D.
Dalsze kroki
- Twórz bardziej złożone mapy 3D, korzystając z istniejących przykładów Google.
- Odkryj pełny potencjał Map 3D w Maps JavaScript API w dokumentacji referencyjnej.