Dostosowywanie map 3D

Wygląd i sposób działania mapy podstawowej 3D możesz dostosować za pomocą definiowania stylów map w Google Cloud.

Dzięki definiowaniu stylów map w Google Cloud możesz kontrolować wygląd i działanie mapy wyświetlanej użytkownikom. Kontrolując funkcje takie jak gęstość ważnych miejsc, usuwanie niektórych kategorii ważnych miejsc i modyfikowanie wypełnienia lub obrysu obiektów, możesz tworzyć mapy dostosowane do potrzeb użytkowników.

Definiowanie stylów map w Google Cloud umożliwia edytowanie map bez użycia kodu w konsoli Google Cloud. Zmiany wprowadzone w stylu w konsoli Map będą automatycznie widoczne w aplikacji.

W przykładzie poniżej pokazano mapę, która używa niestandardowego stylu, aby zmienić kolor ikon i tekstu elementów rekreacyjnych na pomarańczowy:

async function initMap() {
    const { Map3DElement } = await google.maps.importLibrary("maps3d");
    const map = new Map3DElement({
        center: { lat: 37.75183154601466, lng: -119.52369070507672, altitude: 2200 },
        tilt: 67.5,
        heading: 108.94057782079429,
        range: 6605.57279990986,
        mapId: 'bcce776b92de1336e22c569f',
        mode: 'HYBRID',
        gestureHandling: "COOPERATIVE"
    });
    document.body.append(map);
}
initMap();
index.js

Przegląd

Proces dostosowywania map 3D za pomocą definiowania stylów map w Google Cloud jest taki sam jak w przypadku map 2D:

1 Tworzenie identyfikatora mapy Utwórz identyfikator mapy. Identyfikatory map są przekazywane do aplikacji w celu obsługi stylów. W kolejnych krokach powiążesz z tym identyfikatorem mapy styl niestandardowy.
2 Tworzenie stylu mapy w Google Cloud W tym kroku musisz wybrać „Hybrydowa 3D” i użyć „trybu jasnego”.
3 Powiązywanie stylu mapy z mapą Połącz styl z identyfikatorem mapy utworzonym w kroku 1.
4 Dodawanie identyfikatora mapy do aplikacji Określ identyfikator mapy w kodzie za pomocą parametru map-id.
5 Publikowanie identyfikatora mapy Pamiętaj, że zmiany w stylu niestandardowym są automatycznie uwzględniane w aplikacji po opublikowaniu.

Szczegółowe informacje o tworzeniu stylów map znajdziesz w artykule Tworzenie i używanie stylów map.

Ograniczenia

Podczas korzystania z definiowania stylów map w Google Cloud w przypadku map 3D w Mapach w JavaScripcie należy pamiętać o tych ograniczeniach:

  • Tryb ciemny nie jest obsługiwany.
  • Funkcje obsługujące identyfikatory map, takie jak styl oparty na danych, nie są obsługiwane.