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 masz kontrolę nad wyglądem i działaniem mapy, którą wyświetlasz użytkownikom. Możesz dostosować mapę do potrzeb użytkowników, kontrolując takie funkcje jak gęstość ciekawych miejsc, usuwanie określonych kategorii ciekawych miejsc oraz modyfikowanie wypełnienia lub obrysu elementów.

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

W przykładzie poniżej pokazano mapę, która używa stylu niestandardowego do zmiany koloru 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 Utwórz identyfikator mapy Utwórz identyfikator mapy. Identyfikatory map są przekazywane do aplikacji w celu obsługi stylów. W kolejnych krokach powiążesz styl niestandardowy z tym identyfikatorem mapy.
2 Utwórz styl mapy w Google Cloud W tym kroku musisz wybrać „Hybrydowa 3D” i użyć „trybu jasnego”.
3 Powiąż styl mapy z mapą Połącz styl z identyfikatorem mapy utworzonym w kroku 1.
4 Dodaj identyfikator mapy do aplikacji Określ identyfikator mapy w kodzie za pomocą parametru map-id.
5 Opublikuj identyfikator mapy Pamiętaj, że po opublikowaniu zmiany wprowadzone w stylu niestandardowym są automatycznie uwzględniane w aplikacji.

Aby dowiedzieć się więcej o tworzeniu stylów map, przeczytaj artykuł Tworzenie stylów map i korzystanie z nich.

Dynamiczne aktualizowanie identyfikatora mapy

Po utworzeniu instancji mapy możesz dynamicznie zaktualizować właściwość mapId. 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';

Ponieważ właściwość mapId odzwierciedla atrybut HTML, możesz ją też dynamicznie aktualizować, 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 z Mapami 3D w Mapach w JavaScripcie należy pamiętać o pewnych ograniczeniach:

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