Mapy 3D w Maps JavaScript pomagają tworzyć realistyczne doświadczenia wykorzystujące mapy 3D. Udostępnia narzędzia do dostosowywania stylu mapy, poprawiania ułatwień dostępu i zwiększania użyteczności, co umożliwia tworzenie atrakcyjnych i interaktywnych aplikacji.
Oto przykład tego, co możesz zrobić z Mapami 3D w interfejsie Maps JavaScript API:
Dlaczego warto używać Map 3D w Maps JavaScript
Mapy 3D w Maps JavaScript API udostępniają klasę Map3DElement (<gmp-map-3d>) w bibliotece maps3d, dzięki czemu możesz używać zdjęć 3D Google w swoich aplikacjach. Mapy 3D zapewniają wbudowane renderowanie 3D, dzięki czemu możesz dodawać do nich rzeczywiste środowiska 3D, widoki miast i wycieczki po zabytkach lub eksperymentować z nimi.
Używaj 3D <gmp-map-3d> (Map3DElement w bibliotece maps3d) do wyświetlania terenu 3D, nachylenia kamery, kierunku i zakresu przelotów, budynków 3D i obiektów 3D, takich jak Marker3DElement (<gmp-marker-3d>). Do wyświetlania płaskich map drogowych 2D, standardowych pinezek 2D AdvancedMarkerElement i stylów wektorowych 2D używaj 2D <gmp-map> (MapElement lub google.maps.Map w bibliotece maps).
Co można zrobić dzięki Mapom 3D w Maps JavaScript?
- Tworzenie map odzwierciedlających prawdziwy świat: renderuj fotorealistyczne zdjęcia lotnicze 3D miast, terenu i punktów orientacyjnych w trybie
SATELLITElubHYBRID(który nakłada etykiety mapy podstawowej na zdjęcia satelitarne) albo wyświetlaj stylizowaną mapę podstawową 3D w trybieROADMAP, używając właściwościmode. Więcej informacji znajdziesz w artykule Zmienianie trybu mapy. - Dostosowywanie stylu mapy:
- Definiowanie stylów map 3D w Google Cloud: możesz kontrolować widoczność i stylizację ciekawych miejsc oraz dróg na mapie podstawowej. Więcej informacji znajdziesz w artykule Dostosowywanie map 3D.
- Niestandardowe znaczniki, wyskakujące okienka, linie łamane i wielokąty: identyfikuj lokalizacje i rysuj trasy lub granice 3D na mapie za pomocą
MarkerElement,Marker3DElement,Marker3DInteractiveElement,PopoverElement,Polyline3DElementiPolygon3DElement. Więcej informacji znajdziesz w artykułach Znaczniki, Wyskakujące okienka oraz Kształty i linie. - Modele 3D i zasoby glTF: dodawaj niestandardowe modele 3D glTF PBR budynków, punktów orientacyjnych lub obiektów we współrzędnych rzeczywistych za pomocą
Model3DElement. Więcej informacji znajdziesz w artykule Modele.
- Tworzenie map immersyjnych:
- Gotowe ścieżki kamery: oprowadzaj użytkowników po mapie 3D, korzystając ze wstępnie zdefiniowanych przelotów kamery i animacji orbitalnych za pomocą
flyCameraToiflyCameraAround. Więcej informacji znajdziesz w artykule Animowanie ścieżek kamery. - Kontrola interakcji użytkownika: dostosuj elementy sterujące i ruch kamery dostępne dla użytkowników. Więcej informacji znajdziesz w artykułach Elementy sterujące i eksploracja mapy 3D, Ograniczanie widoku i granic kamery oraz Sterowanie pozycją kamery.
- Gotowe ścieżki kamery: oprowadzaj użytkowników po mapie 3D, korzystając ze wstępnie zdefiniowanych przelotów kamery i animacji orbitalnych za pomocą
Krótki przykład
Aby wczytać bibliotekę maps3d i wyrenderować element <gmp-map-3d> z mode="HYBRID", center (lat,lng,altitude), range, tilt i heading, użyj tego fragmentu kodu:
<gmp-map-3d
style="height: 400px; width: 100%;"
mode="HYBRID"
center="40.7484,-73.9857,200"
range="900"
tilt="67"
heading="35">
</gmp-map-3d>
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=maps3d">
</script>
Zastąp YOUR_API_KEY kluczem interfejsu API Google Maps Platform.
Jak korzystać z Map 3D w Maps JavaScript
| 1 | Konfiguracja | Zacznij od sekcji Konfigurowanie interfejsu JavaScript API i wykonaj podane tam instrukcje konfiguracji. |
| 2 | Jak rozliczane jest korzystanie z Maps JavaScript API | Więcej informacji znajdziesz w artykule Wykorzystanie i rozliczenia. |
| 3 | Tworzenie mapy | Więcej informacji znajdziesz w artykule Pierwsze kroki. |
Zakres ochrony
Fotorealistyczne siatki budynków 3D i punktów orientacyjnych są dostępne w wybranych obszarach metropolitalnych w obsługiwanych krajach i regionach. W regionach, w których nie ma siatki 3D (np. w Indiach), <gmp-map-3d> renderuje zdjęcia satelitarne 2D lub mapy drogowe nałożone na ukształtowanie terenu 3D bez wytłoczonych budynków 3D. Aby zaprezentować punkt orientacyjny na obszarze bez siatki 3D, możesz umieścić niestandardowy model 3D glTF na jego współrzędnych za pomocą Model3DElement lub użyć 2D <gmp-map>. Dostępność w poszczególnych krajach (w kolumnie Maps JavaScript 3D) znajdziesz w szczegółowych informacjach o zasięgu Google Maps Platform.
Dalsze kroki
- Zapoznaj się z przewodnikiem dla początkujących, aby utworzyć aplikację „Hello, World!”. Mapa 3D.
- Wypróbuj ćwiczenia z programowania dla początkujących, aby dowiedzieć się, jak dodawać funkcje do mapy.
- Więcej informacji o znacznikach i animacjach znajdziesz w następnym ćwiczeniu z programowania.
- Przejrzyj kolekcję przykładowych plików Google, aby znaleźć taki, który pasuje do Twojego przypadku użycia.