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

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

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

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

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

async function initMap() {
    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',
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });
    document.body.append(map);
}
initMap();
index.js

Обзор

Процесс настройки 3D-карт с использованием облачных инструментов стилизации аналогичен процессу настройки 2D-карт:

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

Для более подробного ознакомления с созданием стилей карт ознакомьтесь с разделом «Создание и использование стилей карт» .

Ограничения

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

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