拖动地图后才会出现矩形叠加层

Question

我有很多标记，我使用markerClusterer在地图上显示它们。另外，点击一个复选框，我需要在所有这些标记附近显示一个矩形叠加（标题）。

我已经编写了2个如下功能来创建叠加并删除它。

function createLabel(posi,name){
 posicion = etiquetaNombre.length;
 etiquetaNombre[posicion] = name;
 var label = new Label({
        position:posi,
         map: map,
         text:name
        });
rectangleNombre[posicion]=label;
rectangleNombre[posicion].setMap(map);
console.log("add: etiquetaNombre",etiquetaNombre);
myfun();    
 }
 function deletelabel(name){
 for(var i = 0; i < etiquetaNombre.length; i++){
        if(etiquetaNombre[i] == name){
            rectangleNombre[i].setMap(null);
            rectangleNombre.splice(i, 1);           
            etiquetaNombre.splice(i, 1);
        }
    }
console.log("delete marker"+name);
console.log("delete: etiquetaNombre",etiquetaNombre);
myfun();    
 }

我按如下方式调用createLabel函数：

          var markerImage = new google.maps.MarkerImage(imageUrl,
          new google.maps.Size(24, 32));
          var latLng = new google.maps.LatLng(40, -100);
          map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: new google.maps.LatLng(40, -100),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        for (var i = 0; i < 10; ++i) {
          var latLng = new google.maps.LatLng(data.photos[i].latitude,
              data.photos[i].longitude);
          var div=document.createElement('div');    

          var marker = new google.maps.Marker({
          position: latLng,
          draggable: false,
          map: map,
          title:"marker"+i
         });
        posi=marker.position;
            name=marker.title;
        createLabel(latLng,name);

        markers.push(marker);
         }
     markerClusterer = new MarkerClusterer(map, markers);

由于我使用的是markerClusterer，因此我必须根据上述要求对其进行自定义。我已完成以下操作。

Cluster.prototype.addMarker = function(marker) {
/// some lines
 if (len < this.minClusterSize_ && marker.getMap() != this.map_) {
    // Min cluster size not reached so show the marker.
    marker.setMap(this.map_);
    posi=marker.position;
    name=marker.title;                
    createLabel(posi,name);
  }

  if (len == this.minClusterSize_) {
    // Hide the markers that were showing.
    for (var i = 0; i < len; i++) {

      this.markers_[i].setMap(null);
      name=this.markers_[i].title;
      deletelabel(name);
    }
  }

  if (len >= this.minClusterSize_) {

    marker.setMap(null);
    name=marker.title;
    deletelabel(name);
  }

  this.updateIcon();
  return true;
};

单击复选框时调用myfun（）如下所示。

 function myfun(){
var element=document.getElementById('id1');
if(element.checked){
for(var i = 0; i < etiquetaNombre.length; i++){
        var div = document.getElementById('normal-'+etiquetaNombre[i]);
        if(div!=null){
        div.style.display = "";
        }
    }
console.log("in my fun element checked",etiquetaNombre);
}
google.maps.event.addListener(map, 'bounds_changed', function () {
  if(element.checked){
        for(var i=0; i<etiquetaNombre.length; i++){
        var div = document.getElementById('normal-'+etiquetaNombre[i]);
        if(div!=null){
        div.style.display = "";
        }
    } 
}

});
}

我在这里面临的问题是，当聚类标记被分解时进行缩放时，不会出现矩形叠加。但是只需拖动地图就可以了。可以指导我在这里做错了什么。

[被修改]

function createLabel(xCenter , yCenter, nombre,banderaPersonalizada){

        posicion = etiquetaNombre.length;

        etiquetaNombre[posicion] = nombre;  

        var RectangleBounds = new google.maps.LatLngBounds(new google.maps.LatLng(yCenter,xCenter), new google.maps.LatLng((yCenter+1),(xCenter+1)));   

        rectangleNombre[posicion] = new RectangleNombre(RectangleBounds);   

        rectangleNombre[posicion].setMap(map);


}


function RectangleNombre(bounds, opt_weight, opt_color) {
   this.bounds_ = bounds;
    this.weight_ = opt_weight || 2;
    this.color_ = opt_color || "#888888";
}
RectangleNombre.prototype = new google.maps.OverlayView();

RectangleNombre.prototype.onAdd = function(map) {

    var idDiv = "normal-"+etiquetaNombre[posicion];
    var div = document.createElement("div");
        div.id = idDiv;
    div.innerHTML = '<span style=" color:blue; font-family:arial; font-size:7.5pt;    font-weight:900" > '+etiquetaNombre[posicion]+'</span>';
    div.style.position = "absolute";
   console.log("banderaCheckEtiqueta"+banderaCheckEtiqueta);
    if(banderaCheckEtiqueta){

        div.style.display = "";
    } else {

        div.style.display = "none";
    }


    this.getPanes().mapPane.appendChild(div);
    this.map_ = map;
    this.div_ = div;

 }


RectangleNombre.prototype.draw = function() {
    var proj = this.getProjection();
    var c1 = proj.fromLatLngToDivPixel(this.bounds_.getSouthWest());

    var c2 = proj.fromLatLngToDivPixel(this.bounds_.getNorthEast());

    this.div_.style.width = "0px";

    this.div_.style.height = "0px";

    this.div_.style.left = c1.x - 12;
    this.div_.style.top = c1.y + 2;

}