Как настроить 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();
index.js

Обзор

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

1	Как создать идентификатор карты	Создайте идентификатор карты. Идентификаторы карт передаются в приложение для обработки стилей. На следующих шагах вы свяжете с этим идентификатором собственный стиль.
2	Создайте облачный стиль карты	Выберите "3D-карта дорог" (поддерживает светлую и тёмную темы) или "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 API действуют определенные ограничения.

• Тёмная тема поддерживается только в режиме ROADMAP (в режимах HYBRID и SATELLITE она не поддерживается).
• Функции, для которых требуется идентификатор карты, например стили на основе данных, не поддерживаются.