Dostosowywanie map 3D

Wygląd i działanie 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 zapewnia możliwość edycji 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 pojawią się automatycznie w Twojej aplikacji.

Poniższy przykład pokazuje mapę, która używa niestandardowego stylu, aby zmienić kolor ikon i tekstu elementó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 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.

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 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.