1

У google-карт ест такая настройка: изменять стандартный маркер на свою картинку.

var markerImageHover = new google.maps.MarkerImage(
  'qqq.jpg',
  new google.maps.Size(300, 300)
);

Я хочу так изменить маркер, но вместо картинки применить html-тэг. Есть ли такая возможность?

1 ответ 1

1

Нужно сделать свой OverlayView

class HTMLMarker extends google.maps.OverlayView {
  constructor(LatLngPosition, content) {
    super();
    this.position = LatLngPosition;
    this.content = content;
    this.div = document.createElement('div');
  }

  onAdd() {
    this.div.className = 'html-marker';
    this.div.style.position = 'absolute';

    const panes = this.getPanes();
    panes.overlayImage.appendChild(this.div);

    if (typeof this.content === 'undefined') {
      return;
    }

    if (typeof this.content === 'string') {
      this.div.innerHTML = this.content;
    } else if (typeof this.content.tagName !== 'undefined') {
      try {
        this.div.appendChild(this.content);
      } catch (err) {
      }
    }
  }

  remove() {
    if (this.div) {
      this.div.parentNode.removeChild(this.div);
      this.div = null;
    }
  }

  draw() {
    const position = this.getProjection().fromLatLngToDivPixel(this.position);
    this.div.style.left = `${position.x - (this.div.offsetWidth / 2)}px`;
    this.div.style.top = `${position.y - (this.div.offsetHeight / 2)}px`;
  }

  getPosition() {
    return this.position;
  }

  getMarkerElement() {
    return this.div;
  }
}

export default HTMLMarker;

Пример создания маркера

const marker = new HTMLMarker(
  new google.maps.LatLng(lat, lng), htmlContent,
);

marker.setMap(googleMapObject);

2

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.