Question

我正在尝试使我当前正在徘徊的标记具有比其他标记更大的z-index，因此即使它被其他标记隐藏，当我将鼠标悬停在其上时也会获得完全可见性。

点击任何标记我想做同样的事情。

  google.maps.event.addListener(this.marker, 'mouseover', function() {
            this.old_ZIndex = this.getZIndex(); //trying to get the current z- index
            console.log(this.old_ZIndex); //this is undefined: why?
            this.setZIndex(this.old_ZIndex + 100); //setting a higher z-index than all other  markers
            console.log("the old z index is ",this.old_ZIndex);
        });

但是有了这个，我将无限增加z索引..还有一些其他的方式，当我悬停或点击任何其他标记时我可以恢复。

或者有没有更好的方法来实现它？

Answer 1

'this.getZIndex（）'总是返回'undefined'，如果您之前没有在标记上设置zIndex，无论是在首次初始化时还是使用setOption（）函数。

如果标记超过100个，您的脚本也可能无法100％运行。

我在下面放了一个非常简单的地图，其中包含2个标记，略微重叠。在悬停其中一个标记时，它会将zIndex设置为将其带到顶部所需的最高值，然后将其返回到以前在mouseout上的值：

    var map;
    var markers = new Array();
    var highestZIndex = 0;

    function initialize() {

        /* SETUP MAP */
        var myLatlng = new google.maps.LatLng(52.06768, -1.33758);
        var mapOptions = {
            center: myLatlng,
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        /* ADD 1st MARKER */
        var markerOptions = {
            position: new google.maps.LatLng(52.06768, -1.32058), 
            map: map,
            zIndex:1
        };
        marker = createMarker(markerOptions, false);
        marker.set("myZIndex", marker.getZIndex());

        google.maps.event.addListener(marker, "mouseover", function() {
            getHighestZIndex();
            this.setOptions({zIndex:highestZIndex+1});
        });
        google.maps.event.addListener(marker, "mouseout", function() {
            this.setOptions({zIndex:this.get("myZIndex")});
        });

        /* ADD 2nd MARKER */
        var markerOptions = {
            position: new google.maps.LatLng(52.06768, -1.33758), 
            map: map,
            zIndex:2    
        };
        marker = createMarker(markerOptions, false);
        marker.set("myZIndex", marker.getZIndex());

        google.maps.event.addListener(marker, "mouseover", function() {
            getHighestZIndex();
            this.setOptions({zIndex:highestZIndex+1});
        });
        google.maps.event.addListener(marker, "mouseout", function() {
            this.setOptions({zIndex:this.get("myZIndex")});
        });

    }

    function createMarker(markerOptions) {
        var marker = new google.maps.Marker(markerOptions);
        markers.push(marker);
        return marker;
    }

    function getHighestZIndex() {

        // if we haven't previously got the highest zIndex
        // save it as no need to do it multiple times
        if (highestZIndex==0) {
            if (markers.length>0) {
                for (var i=0; i<markers.length; i++) {
                    tempZIndex = markers[i].getZIndex();
                    if (tempZIndex>highestZIndex) {
                        highestZIndex = tempZIndex;
                    }
                }
            }
        }
        return highestZIndex;

    }

Answer 2

var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                zIndex: 1
            });       

            google.maps.event.addListener(marker, 'mouseover', function () {
                this.setOptions({zIndex:10});
            });
            google.maps.event.addListener(marker, 'mouseout', function () {
                this.setOptions({zIndex:1});
            });

Answer 3

所以这个问题是在一年前，但我想出了一些东西，并认为其他人可能会欣赏它。甚至还有图标翻转作为奖励。我正在处理数以千计的公共汽车和火车站点，所以这对我来说非常有效。

google.maps.event.addListener(marker, 'mouseover', function () {
    if (this.getIcon() === busnot) { this.setIcon(busovr); }
    if (this.getIcon() === lrtnot) { this.setIcon(lrtovr); }
    $.each($.grep(markers, function (item) { return item.getZIndex() == 10 }), function (i, e) { e.setOptions({ zIndex: 1 }); });
    this.setOptions({zIndex:10});
});
google.maps.event.addListener(marker, 'mousemove', function () {
    if (this.getIcon() === busnot) { this.setIcon(busovr); }
    if (this.getIcon() === lrtnot) { this.setIcon(lrtovr); }
    $.each($.grep(markers, function (item) { return item.getZIndex() == 10 }), function (i, e) { e.setOptions({ zIndex: 1 }); });
    this.setOptions({ zIndex: 10 });
});
google.maps.event.addListener(marker, 'mouseout', function () {
    if (this.getIcon() === busovr) { this.setIcon(busnot); }
    if (this.getIcon() === lrtovr) { this.setIcon(lrtnot); }
    $.each($.grep(markers, function (item) { return item.getZIndex() == 10 }), function (i, e) { e.setOptions({ zIndex: 1 }); });
});

Answer 4

我这样做的方法是让一个变量（highestZ）为我的所有标记设置zIndex（在我的情况下，我使用折线完成）和增量，以及一个变量暂时保存任何标记的z-index ＆＃34;鼠标悬停＆＃34;于：

将变量设置为全局：

var highestZ = 1; //set 1 for the first z-index
var tmpZIndex = 0;

然后在构建/初始化标记选项时，只需添加此

zIndex : highestZ++ //this sets the z-index for the marker and increments it for the next one

示例（我在循环中做了我的事）：

var routePath = new google.maps.Polyline({
           strokeWeight: 5,
           zIndex : highestZ++ //set zIndex and increment it
         });

最后只需执行mouseover和mouseout事件处理程序：

        google.maps.event.addListener(routePath, "mouseover", function() {
            tempZIndex = routePath.zIndex; //set "this" z-index value to tempZIndex for mouseout
            routePath.setOptions({
                zIndex: highestZ + 1 //set the z-index to the highest z-index available plus 1 for it to be the topmost marker on mouseover
            });
        });
        google.maps.event.addListener(routePath, "mouseout", function() {
            routePath.setOptions({
                zIndex: tempZIndex //set the z-index back to it's original set upon mouseover earlier
            });

我的回答可能很简单，而且一般而且当然不完整，只关注问题，希望你能进一步完善你的项目。

Answer 5

我认为最简单的方法是使用CSS而不是Javascript：

.your-custom-marker-class {
   z-index: 100;
}
.your-custom-marker-class:hover {
   z-index: 101;
}

这意味着您必须使用CustomOverlays（https://developers.google.com/maps/documentation/javascript/customoverlays#introduction）而不是默认标记，但如果您想自定义布局等，那还有其他一些优点。

在悬停时更改标记的z索引以使其可见

5 个答案: