如何动态更改自定义 google 地图标记的 html？

Question

我创建了一个自定义 HTML 地图标记，我可以用它来添加 html 到标记。这非常有效。我在下面添加了 class。

每 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

由于标记是 DOM 中的一个元素，您可以通过 .innerHTML = ...:

更新其内容

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

在您的情况下，我会向您的 HTMLMapMarker class 添加一个新方法 update(text) 并在需要更改标记的内容时调用它：

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

Answer 2

marker.html 只是 HTMLMapMarker class 的属性，用于在 createDiv 中实际创建 HTML 对象。仅更新此属性不会触发任何操作，并且之前已调用 createDiv。您需要做的是添加一个 updateDiv(html) 方法，例如：

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

然后调用此方法更新标记（使用 HTML）。或者，您可以使用 HTMLMapMarker 对象的 .div 属性直接操作标记对象。

如何动态更改自定义 google 地图标记的 html？

How to dynamically change html of custom google maps marker?

javascript

google-maps-api-3