如何在Google Maps API上更新或强制重绘标记群集图标？

Question

我创建了一个自定义群集html标记，在此标记内，我从群集中更改了标记的颜色。调试代码变量颜色更新，但我的标记颜色没有。

我创建了一个函数updateMakers，我调用它来更新我的集群。

我调用此函数来更新集群标记

 document.getElementById('update').addEventListener('click', function(){

 updateMarkers(locations, markers, HTMLMarker, map, 'green');
})

但颜色不会更新。

function initMap() {
      var map = new google.maps.Map(document.getElementById("map"), {
        zoom: 12,
        center: {
          lat: 37.773972,
          lng: -122.431297
        },
        gestureHandling: "greedy",
        disableDefaultUI: true
      });
     var markers = [];
     var locations = [{
        lat: 37.77,
        lng: -122.44,
        
      },
      {
        lat: 37.78,
        lng: -122.45,
       
      },
      {
        lat: 37.79,
        lng: -122.42,
        
      },
      {
        lat: 37.72,
        lng: -122.43,
        
      },
      {
        lat: 37.74,
        lng: -122.42,
        
      },
      {
        lat: 37.75,
        lng: -122.41,
       
      },
      {
        lat: 37.75,
        lng: -122.43,
        
      },
      {
        lat: 37.79,
        lng: -122.43,
        
      },
      {
        lat: 37.78,
        lng: -122.43,
      }
    ];  
    var Newlocations = [
        {lat: -31.563910, lng: 147.154312},
        {lat: -33.718234, lng: 150.363181},
        {lat: -33.727111, lng: 150.371124},
        {lat: -33.848588, lng: 151.209834},
        {lat: -33.851702, lng: 151.216968},
        {lat: -34.671264, lng: 150.863657},
        {lat: -35.304724, lng: 148.662905},
        {lat: -36.817685, lng: 175.699196},
        {lat: -36.828611, lng: 175.790222},
        {lat: -37.750000, lng: 145.116667},
        {lat: -37.759859, lng: 145.128708},
        {lat: -37.765015, lng: 145.133858},
        {lat: -37.770104, lng: 145.143299},
        {lat: -37.773700, lng: 145.145187},
        {lat: -37.774785, lng: 145.137978},
        {lat: -37.819616, lng: 144.968119},
        {lat: -38.330766, lng: 144.695692},
        {lat: -39.927193, lng: 175.053218},
        {lat: -41.330162, lng: 174.865694},
        {lat: -42.734358, lng: 147.439506},
        {lat: -42.734358, lng: 147.501315},
        {lat: -42.735258, lng: 147.438000},
        {lat: -43.999792, lng: 170.463352}
      ]
  
    updateMarkers(locations, markers, HTMLMarker, map, 'red');
     
     document.getElementById('update').addEventListener('click', function(){
     
     updateMarkers(locations, markers, HTMLMarker, map, 'green');
    })
      
    function updateMarkers(data, markers, HTMLMarker, map, bg) {
     var labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    	var infoWin = new google.maps.InfoWindow();
    	markers = data.map(function(location, i) {
      var htmlMarker = new HTMLMarker(location.lat, location.lng, bg);
      google.maps.event.addListener(htmlMarker, 'click', function(evt) {
        console.log("htmlMarker click@" + evt.latLng.toUrlValue(6));
        infoWin.setContent("Open my info window<br>marker #" + i);
        infoWin.setOptions({
          pixelOffset: new google.maps.Size(20, 0)
        })
        infoWin.open(map, htmlMarker);

      });
      return htmlMarker;
    });

      var markerCluster = new MarkerClusterer(map, markers, {
        imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
      });
    }

    }

   google.maps.event.addDomListener(window, 'load', initMap);
    
 
  var HTMLMarker = function (lat, lng, bg) {
      this.lat = lat;
      this.lng = lng;
      this.pos = new google.maps.LatLng(lat, lng);
      this.bg = bg;
    }
    HTMLMarker.prototype = new google.maps.OverlayView();
  	HTMLMarker.prototype.onRemove = function() {
    if (this.div && this.div.parentNode && this.div.parentNode.removeChild)
      this.div.parentNode.removeChild(this.div);
  }
  HTMLMarker.prototype.getDraggable = function() {};
  HTMLMarker.prototype.getPosition = function() {
    return this.pos
  };

  HTMLMarker.prototype.onAdd = function() {
    this.div = document.createElement('DIV');
    this.div.className = "htmlMarker";
    this.div.style.position = 'absolute';
    this.div.style.cursor = 'pointer';
    console.log(this.bg);
    this.div.innerHTML = `<p style="background:${this.bg}">$500</p>`;
    var that = this;
    this.div.addEventListener("click", function(evt) {
      console.log("click");
      google.maps.event.trigger(that, 'click', {
        latLng: that.pos
      })
    })
    var panes = this.getPanes();
    panes.overlayImage.appendChild(this.div);
  }

  HTMLMarker.prototype.draw = function() {
    var overlayProjection = this.getProjection();
    var position = overlayProjection.fromLatLngToDivPixel(this.pos);
    var panes = this.getPanes();
    this.div.style.left = position.x + 'px';
    this.div.style.top = position.y + 'px';
  }
    

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}
h1, p {
  margin: 0;
  padding: 0;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>
<button style="position: absolute; bottom: 40px" id="update">UPDATE MARKERS</button>https://stackoverflow.com/questions/ask#

Answer 1

我的错误我需要设置一个timeOut来解决我的问题。

setTimeout(() => {
           updateMarkers(locations, markers, HTMLMarker, map, 'green');
      }, 300);