无法阻止所有标记叠加重叠标记google maps api v3

Question

我有一个使用api版本3的谷歌地图。我想创建带有自定义图标和编号标签的标记。我一直在尝试使用似乎最受欢迎的方法，即下面提供的“labels.js”解决方案。但是，无论我尝试什么，所有编号的叠加都会重叠所有标记（尽管我使用相同的zIndex设置标记和标签）。查看提供的屏幕截图，看看我在说什么。如果您查看屏幕中的标记14和15，您会看到15标记与14标记重叠，但它不应该与14标记重叠。

http://i.imgur.com/QoYqcHJ.jpg

关于与自定义叠加层正确重叠的许多讨论都围绕着代码行进行：

var pane = this.getPanes().overlayImage;

但是，我有这个。我将每个标签覆盖和标记对设置为相同的zIndex，正确重叠的标记证明此zIndex增量正在起作用。我已经提供了下面的所有代码，并且碰到了一堵砖墙。我没有运气就尝试了一切。假设所有变量都已正确声明。

label.js：

/* START label.js */

// Define the overlay, derived from google.maps.OverlayView
function Label(opt_options) {
    // Initialization
    this.setValues(opt_options);

    // Here go the label styles
    var span = this.span_ = document.createElement('span');
    span.style.cssText = 'position: relative;' +
                          'white-space: nowrap;color:#666666;' +
                          'font-family: Arial; font-weight: bold;' +
                          'font-size: 11px;';

    var div = this.div_ = document.createElement('div');
    div.appendChild(span);
    div.style.cssText = 'position: absolute; display: none;';
};

Label.prototype = new google.maps.OverlayView;

Label.prototype.onAdd = function () {
    var pane = this.getPanes().overlayImage;
    pane.appendChild(this.div_);

    // Ensures the label is redrawn if the text or position is changed.
    var me = this;
    this.listeners_ = [
          google.maps.event.addListener(this, 'position_changed',
               function () { me.draw(); }),
          google.maps.event.addListener(this, 'text_changed',
               function () { me.draw(); }),
          google.maps.event.addListener(this, 'zindex_changed',
               function () { me.draw(); })
     ];
};

// Implement onRemove
Label.prototype.onRemove = function () {
    this.div_.parentNode.removeChild(this.div_);

    // Label is removed from the map, stop updating its position/text.
    for (var i = 0, I = this.listeners_.length; i < I; ++i) {
        google.maps.event.removeListener(this.listeners_[i]);
    }
};

// Implement draw
Label.prototype.draw = function () {
    var projection = this.getProjection();
    var div = this.div_;

    // Some custom code to properly get the offset for the numbered label for each marker
    var labelOffset;
    if (parseInt(this.get('text').toString()) < 10) labelOffset = new google.maps.Point(6, -35);
    else labelOffset = new google.maps.Point(9, -35);

    var point1 = this.map.getProjection().fromLatLngToPoint(
                    (this.get('position') instanceof google.maps.LatLng) ? this.get('position') : this.map.getCenter()
                );
    var point2 = new google.maps.Point(
                    ((typeof (labelOffset.x) == 'number' ? labelOffset.x : 0) / Math.pow(2, map.getZoom())) || 0,
                    ((typeof (labelOffset.y) == 'number' ? labelOffset.y : 0) / Math.pow(2, map.getZoom())) || 0
                );
    var offSetPosition = this.map.getProjection().fromPointToLatLng(new google.maps.Point(
                    point1.x - point2.x,
                    point1.y + point2.y
                ));

    var position = projection.fromLatLngToDivPixel(offSetPosition);
    // End custom code

    div.style.left = position.x + 'px';
    div.style.top = position.y + 'px';
    div.style.display = 'block';
    div.style.zIndex = this.get('zIndex'); //ALLOW LABEL TO OVERLAY MARKER
    this.span_.innerHTML = this.get('text').toString();
};

/* END label.js */

使用标记创建地图的代码：

var mapOptions = {
    zoom: myZoom,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false
};

map = new google.maps.Map(document.getElementById("gmap"), mapOptions);

/* Insert logic here to iterate and add each marker */

// This function is called for every marker, i increases by 1 each call
function addMarker(latlng, mylabel, isShowroom, data, type, i) {
    var markerImage;
    var labelColor = '#666666';

    if (isShowroom) {
        markerImage = 'http://www.subzero-wolf.com/common/images/locator/pin-showroom.png';
    } else {
        if (type == 'service') {
            markerImage = '/common/images/locator/pin-dealer.png';
        } else if (type == 'parts') {
            markerImage = '/common/images/locator/pin-parts.png';
        } else {
            markerImage = '/common/images/locator/pin-dealer.png';
        }
    }

    var myMarker = new google.maps.Marker({
        position: latlng,
        draggable: false,
        clickable: true,
        map: map,
        icon: markerImage,
        zIndex: isShowroom ? 9999 : i
    });

    var html = "test content"

    myMarker['isShowroom'] = isShowroom;
    myMarker['infowindow'] = new google.maps.InfoWindow({
        content: html
    });

    google.maps.event.addListener(myMarker, 'click', function() {
        this['infowindow'].open(map, this);
    });

    // Dont show a label for the showroom because this is the marker with the star icon, no number needed
    if (!isShowroom) {
        var label = new Label({
            map: map
        });
        label.set('zIndex', i);
        label.bindTo('position', myMarker, 'position');
        label.set('text', mylabel);
    }

    markerArray.push(myMarker);

}