在悬停时更改标记的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

'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;

    }