html тэг вместо стандартного маркера google maps API

250
22 февраля 2018, 16:08

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

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

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

Answer 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);

READ ALSO
delay как элемент массива

delay как элемент массива

Друзья, пытаюсь создать анимацию - эффект движения сквозь коридорЭлементов пусть пока 3

328
Запрет изменения переменной

Запрет изменения переменной

Есть класс который должен быть инициализирован один разКак мне сделать так что бы при повторном создании "экземпляра класса" он не создался?

235
Задать цвет фона для кнопки через javascript

Задать цвет фона для кнопки через javascript

Помогите задать цвет фона для кнопки через javascript

283