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

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`;        }    }

Answer 1

由于标记是 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");

Answer 2

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直接操作标记对象。