Как динамически изменить HTML пользовательский маркер карт Google?

Question

Я создал пользовательский HTML-маркер карты, который я могу использовать для добавления HTML-кода к маркеру.Это прекрасно работает.Я добавил класс ниже.

Каждые 10 секунд поступают новые данные, и я хотел бы изменить HTML-код маркера таким образом, чтобы данные отображались соответствующим образом.

Я попытался просто изменить атрибут html маркера следующим образом:

marker.html = `<div id="test" class="progress consumptionProduction">
    <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>`;

, который действительно изменяет значение marker.html, но маркер не обновляется на карте.

marker = createHTMLMapMarker({
      latlng: new google.maps.LatLng((53.233071+0.00008),(6.535706-0.00006)),
      map: map,
      html: `<div id="test" class="progress consumptionProduction">
                <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                <div class="progress-bar bg-success" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
              </div>`
    })    

export const createHTMLMapMarker = ({ OverlayView = 
google.maps.OverlayView,  ...args }) => {
class HTMLMapMarker extends google.maps.OverlayView {
    constructor() {
    super();
    this.latlng = args.latlng;
    this.html = args.html;
    this.setMap(args.map);
    }

    createDiv() {
        this.div = document.createElement('div');
        this.div.style.position = 'absolute';
        if (this.html) {
        this.div.innerHTML = this.html;
        }
        google.maps.event.addDomListener(this.div, 'click', event => {
        google.maps.event.trigger(this, 'click');
        });
    }

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

    positionDiv() {
        const point = this.getProjection().fromLatLngToDivPixel(this.latlng);
        if (point) {
        this.div.style.left = `${point.x}px`;
        this.div.style.top = `${point.y}px`;
        }
    }

    draw() {
        if (!this.div) {
        this.createDiv();
        this.appendDivToOverlay();
        }
        this.positionDiv();
    }

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

    getPosition() {
        return this.latlng;
    }

    getDraggable() {
        return false;
    }

}

return new HTMLMapMarker();
};

Answer 1

marker.html - это просто свойство класса HTMLMapMarker, которое используется для фактического создания объекта HTML в createDiv. Простое обновление этого свойства не вызывает никаких действий, и createDiv уже был вызван ранее. То, что вам нужно сделать, это добавить метод updateDiv(html) такой:

    updateDiv(html) {
        this.html=html;
        if(!this.div){
            this.createDiv();
        } else {
            this.div.innerHTML = this.html;
        }
    }

Затем вызовите этот метод, чтобы обновить маркер (с HTML). Кроме того, вы можете использовать свойство .div объекта HTMLMapMarker, чтобы напрямую манипулировать объектом маркера.

Answer 2

Поскольку маркер является элементом в DOM, вы можете обновить его содержимое с помощью .innerHTML = ...:

document.getElementById("test").innerHTML = "This is my new content";

В вашем случае я бы добавил новый метод update(text) в ваш класс HTMLMapMarker и вызвал быэто всякий раз, когда необходимо изменить содержимое маркера:

class HTMLMapMarker extends google.maps.OverlayView {
    ...

    update(newText) {
        if (this.div) {
            this.div.innerHTML = newText;
        } else {
          console.warn("createDiv() has not been called on this point", this);
        }
    }
    ...
}

Вызвать процедуру update ():

marker = createHTMLMapMarker({
      latlng: new google.maps.LatLng((53.233071+0.00008),(6.535706-0.00006)),
      map: map,
      html: `<div id="test" class="progress consumptionProduction">
                <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                <div class="progress-bar bg-success" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
              </div>`
    }) 

marker.update("This should be my new content");