Dostosowywanie map 3D

Możesz dostosować wygląd i działanie mapy podstawowej 3D, korzystając z definiowania stylów map w Google Cloud.

Dzięki definiowaniu stylów map w Google Cloud masz kontrolę nad wyglądem i działaniem mapy, którą prezentujesz użytkownikom. Dzięki kontrolowaniu funkcji takich jak gęstość ciekawych miejsc, usuwanie niektórych kategorii ciekawych miejsc oraz modyfikowanie wypełnienia lub obrysu obiektów możesz stworzyć mapę dostosowaną do potrzeb użytkowników.

Definiowanie stylów map w Google Cloud umożliwia edytowanie bez użycia kodu w konsoli Google Cloud. Każdy utworzony przez Ciebie styl niestandardowy jest powiązany z identyfikatorem mapy. Zmiany wprowadzone w stylu w konsoli Map Google będą automatycznie widoczne w aplikacji.

Poniższy przykład pokazuje mapę, na której zastosowano styl niestandardowy, aby zmienić kolor ikon i tekstu obiektów rekreacyjnych na pomarańczowy:

async function init() {
    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', // Styles are associated with map IDs.
        mode: 'HYBRID',
    });

    document.body.append(map);
}

void init();

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 chmurze W tym kroku wybierz „Mapa drogowa 3D” (obsługuje tryb jasny i ciemny) lub „Hybrydowa 3D” (obsługuje tryb jasny).
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.

Dynamiczne aktualizowanie identyfikatora mapy

Właściwość mapId możesz aktualizować dynamicznie po utworzeniu instancji mapy. Dzięki temu możesz zastosować inny styl mapy w Google Cloud bez konieczności ponownego tworzenia całej instancji Map3DElement.

Aby zaktualizować identyfikator mapy, ustaw właściwość mapId w instancji Map3DElement:

const map3DElement = document.querySelector('gmp-map-3d');

// Update the map ID dynamically
map3DElement.mapId = 'YOUR_MAP_ID';

Właściwość mapId odzwierciedla atrybut HTML, więc możesz ją też aktualizować dynamicznie, modyfikując atrybut:

const map3DElement = document.querySelector('gmp-map-3d');

// Alternatively, set the map-id attribute
map3DElement.setAttribute('map-id', 'YOUR_MAP_ID');

Ograniczenia

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

  • Tryb ciemny jest obsługiwany tylko w trybie ROADMAP (tryby HYBRID i SATELLITE nie obsługują trybu ciemnego).
  • Funkcje korzystające z identyfikatora mapy, takie jak styl oparty na danych, nie są obsługiwane.