我创建了一个自定义集群 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#我的错误 我需要设置超时来解决我的问题。
setTimeout(() => {
updateMarkers(locations, markers, HTMLMarker, map, 'green');
}, 300);