Маркеры

Маркеры позволяют привлечь внимание пользователя к определенному месту на карте. В этом руководстве рассказывается, как использовать и настраивать маркеры на 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, чтобы обеспечить оптимальную производительность.

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