如何动态更改自定义谷歌地图标记的 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 {&nbsp; &nbsp; ...&nbsp; &nbsp; update(newText) {&nbsp; &nbsp; &nbsp; &nbsp; if (this.div) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.div.innerHTML = newText;&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.warn("createDiv() has not been called on this point", this);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; ...}调用 update() 例程：marker = createHTMLMapMarker({&nbsp; &nbsp; &nbsp; latlng: new google.maps.LatLng((53.233071+0.00008),(6.535706-0.00006)),&nbsp; &nbsp; &nbsp; map: map,&nbsp; &nbsp; &nbsp; html: `<div id="test" class="progress consumptionProduction">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="progress-bar bg-success" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>`&nbsp; &nbsp; })&nbsp;marker.update("This should be my new content");

Answer 2

marker.html只是HTMLMapMarker用于实际创建 .html 对象的类的属性createDiv。仅更新此属性不会触发任何操作，并且createDiv之前已被调用。您需要做的是添加一个updateDiv(html)方法，例如：&nbsp; &nbsp; updateDiv(html) {&nbsp; &nbsp; &nbsp; &nbsp; this.html=html;&nbsp; &nbsp; &nbsp; &nbsp; if(!this.div){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.createDiv();&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.div.innerHTML = this.html;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }然后调用此方法来更新标记（使用 HTML）。或者，您可以使用对象的.div属性HTMLMapMarker直接操作标记对象。