Базовая настройка маркера

API для работы с маркерами на 3D-картах использует два класса для определения маркеров: класс Marker3DElement предоставляет основные параметры ( position , label и map ), а класс PinElement содержит параметры для дальнейшей настройки.

Для добавления маркеров на карту необходимо сначала загрузить библиотеку маркеров, которая предоставляет классы Marker3DElement и PinElement .

Следующий фрагмент кода демонстрирует создание нового PinElement и последующее его применение к маркеру:

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerWithScale = new Marker3DElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(pinScaled);
index.js

На картах, созданных с использованием HTML, основные параметры маркера объявляются с помощью HTML-элемента gmp-marker-3d ; любые настройки, использующие класс PinElement , должны применяться программно. Для этого ваш код должен получить элементы gmp-marker-3d со страницы HTML. Следующий фрагмент кода показывает запрос на получение коллекции элементов gmp-marker-3d , а затем итерацию по результатам для применения настроек, объявленных в gmp-marker-3d.

// Return an array of markers.
const markers = [...document.querySelectorAll('gmp-marker-3d')];

// Loop through the markers
for (let i = 0; i < markers.length; i++) {
  const pin = new PinElement({
      scale: 2.0,
  });

  markers[i].appendChild(pin.element);
}

На этой странице показано, как настраивать маркеры следующими способами:

• Увеличьте масштаб маркера
• Изменить цвет фона
• Изменить цвет границы
• Изменить цвет глифа
• Добавить текст к глифу
• Изменить высоту
• Удалите маркеры

Увеличьте масштаб маркера

Для масштабирования маркера используйте параметр scale :

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerWithScale = new Marker3DElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(pinScaled);
index.js

Изменить цвет фона

Используйте параметр PinElement.background , чтобы изменить цвет фона маркера:

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});

const markerWithBackground = new Marker3DElement({
    position: { lat: 37.419, lng: -122.01 },
});
markerWithBackground.append(pinBackground);
index.js

Изменить цвет границы

Используйте параметр PinElement.borderColor , чтобы изменить цвет границы маркера:

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#FFFFFF',
});
const markerWithBorder = new Marker3DElement({
    position: { lat: 37.415, lng: -122.035 },
});
markerWithBorder.append(pinBorder);
index.js

Изменить цвет глифа

Используйте параметр PinElement.glyphColor , чтобы изменить цвет глифа маркера:

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerWithGlyphColor = new Marker3DElement({
    position: { lat: 37.415, lng: -122.025 },
});
markerWithGlyphColor.append(pinGlyph);
index.js

Добавить текст к глифу

Используйте параметр PinElement.glyph , чтобы заменить стандартный глиф текстовым символом. Текстовый глиф элемента PinElement масштабируется вместе с PinElement , а его цвет по умолчанию соответствует glyphColor по умолчанию элемента PinElement:

// Change many elements together and extrude marker.
const pinTextGlyph = new PinElement({
    background: '#F0F6FC',
    glyphText: 'E',
    glyphColor: 'red',
    borderColor: '#0000FF',
});
const markerWithGlyphText = new Marker3DElement({
    position: { lat: 37.415, lng: -122.015, altitude: 50 },
    extruded: true,
    altitudeMode: 'RELATIVE_TO_GROUND',
});
markerWithGlyphText.append(pinTextGlyph);
index.js

Изменить высоту

Используйте параметр Marker3DElement.position.altitude в сочетании с Marker3DElement.altitudeMode и Marker3DElement.extruded , чтобы изменить высоту маркера и добавить линию выдавливания между землей и маркером:

// Change a marker's altitude and add an extrusion.
const extrudedMarker = new Marker3DElement({
    position: { lat: 37.4239163, lng: -122.0947209, altitude: 100 },
    altitudeMode: 'RELATIVE_TO_GROUND',
    extruded: true,
});
index.js

Удалите маркеры

Используйте Marker3DElement.remove() для удаления маркеров с карты:

const marker = document.querySelector('gmp-marker-3d');
marker.remove();

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

• Создавайте маркеры с помощью графики.