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

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

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

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

const pinScaled = new PinElement({
  scale: 1.5,
});

const markerWithLabel = new Marker3DElement({
  position: { lat: 37.419, lng: -122.03 },
  label: 'Simple label'
});

На картах, созданных с использованием 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 markerScaled = new Marker3DElement({
  map,
  position: { lat: 37.419, lng: -122.02 },
});

markerScaled.appendChild(pinScaled);

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

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

// Change the background color.
const pinBackground = new PinElement({
  background: '#FBBC04',
});
const markerBackground = new Marker3DElement({
  map,
  position: { lat: 37.419, lng: -122.01 },
});

markerBackground.appendChild(pinBackground);

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

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

// Change the border color.
const pinBorder = new PinElement({
  borderColor: "#137333",
});
const markerBorder = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.035 },
});

markerBorder.appendChild(pinBorder);

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

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

// Change the glyph color.
const pinGlyph = new PinElement({
  glyphColor: "white",
});
const markerGlyph = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.025 },
});

markerGlyph.appendChild(pinGlyph);

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

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

const pinTextGlyph = new PinElement({
  glyph: "T",
  glyphColor: "white",
});
const markerGlyphText = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.015 },
});

markerGlyphText.appendChild(pinTextGlyph);

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

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

const marker = 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();

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