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

В Markers 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);

В картах, созданных с помощью 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);

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

Чтобы изменить цвет фона маркера, используйте атрибут 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);

Как изменить цвет контура

Чтобы изменить цвет контура маркера, используйте атрибут 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);

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

Чтобы изменить цвет глифа маркера, используйте атрибут 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);

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

Чтобы заменить глиф по умолчанию текстовым символом, используйте атрибут 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);

Как изменить высоту

Чтобы изменить высоту маркера и добавить между ним и землей линию, используйте атрибут 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,
});

Как удалить маркеры

Чтобы удалить маркеры с карты, используйте метод Marker3DElement.remove():

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

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