Маркеры

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

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

Возможности MarkerElement Marker3DElement
Настройка Высокий уровень (поддерживает пользовательские HTML-элементы, основные API анимации и т. д.) Низкий (меньше возможностей для настройки)
Производительность Снижение производительности взаимодействия (падение частоты кадров при большом количестве маркеров) Повышенная производительность взаимодействия (оптимизировано для отображения больших наборов данных)
Рекомендуемая вместимость Надежная работа взаимодействия до 1000 маркеров. Рекомендуется для работы с более чем 1000 маркерами.

Настройте цвет, масштаб и изображение значка.

Настройте фон, глиф, цвет границы и размер маркера по умолчанию.

Маркеры на заказ

Замените стандартный значок маркера пользовательским SVG-ресурсом.

Маркеры с графикой

Установить высоту маркера

Высоту маркера можно задать, выдавив его и указав высоту.

Экструдированный маркер

Настройте маркеры на реагирование на щелчки мыши и события клавиатуры.

Чтобы маркер реагировал на щелчки мыши и события клавиатуры, добавьте обработчик события click . 

const interactiveMarker = new Marker3DInteractiveElement({
    position,
    gmpPopoverTargetElement: popover,
});

Установить поведение при столкновении маркеров

Укажите, как должен вести себя маркер при столкновении с другим маркером или меткой на карте. 

const marker = new Marker3DElement({
    position: { lat, lng },
    // Try setting a different collision behavior here.
    collisionBehavior: 'REQUIRED',
});

Показатели эффективности маркеров

Пользовательские HTML-маркеры ( MarkerElement ) демонстрируют более низкую производительность, чем стандартные 3D-маркеры ( Marker3DElement ). Для приложений с более чем 1000 маркерами настоятельно рекомендуется использовать класс Marker3dElement для обеспечения оптимальной производительности.

Следующий шаг