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

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

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

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

我在下面拼凑了一张非常简单的 map ，其中包含 2 个标记，略有重叠。在标记之一悬停时，它会将 zIndex 设置为将其带到顶部所需的最高值，然后将其返回到之前在鼠标移开时的状态:

    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;

    }