Как настроить 3D-карты

Вы можете настроить внешний вид базовой 3D-карты с помощью облачных стилей карт.

Облачные стили карт позволяют управлять внешним видом карты, которую вы показываете пользователям. Вы можете настроить плотность объектов инфраструктуры, удалить определенные категории объектов, изменить заливку или контур объектов и таким образом создать карту, которая будет удобна для ваших пользователей.

Облачные стили карт позволяют настраивать оформление карт в консоли Google Cloud без написания кода. Каждый созданный вами собственный стиль связан с идентификатором карты. Изменения, внесенные в стиль в консоли Карт, будут автоматически появляться в вашем приложении.

В примере ниже показана карта, в которой с помощью собственного стиля цвет значков и текста для объектов отдыха изменен на оранжевый:

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();

Обзор

Процесс настройки 3D-карт с помощью облачных стилей карт такой же, как и для 2D-карт:

1 Как создать идентификатор карты Создайте идентификатор карты. Идентификаторы карт передаются в приложение для обработки стилей. На следующих этапах вы свяжете с этим идентификатором собственный стиль.
2 Создайте облачный стиль карты На этом шаге необходимо выбрать "3D-гибрид" и использовать светлую тему.
3 Как связать стиль с картой Свяжите стиль с идентификатором карты, созданным на первом шаге.
4 Добавьте идентификатор карты в приложение Укажите идентификатор карты в коде с помощью параметра map-id.
5 Как опубликовать идентификатор карты Обратите внимание, что изменения, внесенные в пользовательский стиль, автоматически применяются к приложению после публикации.

Подробную информацию о создании стилей карт можно найти в статье Как создавать и использовать стили карты.

Как динамически обновлять идентификатор карты

Свойство mapId можно динамически обновлять после создания экземпляра карты. Это позволяет применить другой облачный стиль карты, не создавая заново весь экземпляр Map3DElement.

Чтобы обновить идентификатор карты, задайте свойство mapId в экземпляре Map3DElement:

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

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

Поскольку свойство mapId отражает HTML-атрибут, вы также можете динамически обновлять его, изменяя атрибут:

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

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

Ограничения

При использовании облачного стиля карт с 3D-картами в Maps JavaScript необходимо учитывать следующие ограничения:

  • Тёмная тема не поддерживается.
  • Не поддерживаются функции, для которых требуется идентификатор карты, например стили на основе данных.