Маркеры

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

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

Возможности 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.

Дальнейшие действия