3

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

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

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

var pane = this.getPanes().overlayImage;

但是，我有这个。我将每个标签覆盖和标记对设置为相同的 zIndex，正确重叠的标记证明这个 zIndex 增量是有效的。我在下面提供了我的所有代码，并且遇到了砖墙。我已经尝试了所有可能的方法，但没有运气。假设所有变量都已正确声明。

标签.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);

}
4

0 回答 0