Настройте 3D-карты

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

Благодаря облачным инструментам стилизации карт вы можете контролировать внешний вид карты, которую показываете пользователям. Управляя такими параметрами, как плотность точек интереса (POI), удаление определенных категорий POI, а также изменение заливки или обводки объектов, вы можете создать карту, адаптированную под потребности ваших пользователей.

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

  • Темный режим не поддерживается.
  • Функции, использующие идентификаторы карт, такие как стилизация на основе данных, не поддерживаются.