изменение индекса z маркера при наведении, чтобы сделать его видимым

Question

Я пытаюсь сделать так, чтобы маркер, на котором я сейчас зависал, имел больший z-индекс, чем другие, так что даже если он будет скрыт другими маркерами, он получит полную видимость, когда я наведу курсор на него. *

При нажатии любого маркера я хочу сделать то же самое.

  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 на максимальное значение, необходимое для его поднятия на вершину, а затем вернет его к тому состоянию, в котором он был ранее при наведении мыши:

    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

Я думаю, что самый простой способ - использовать 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) вместо маркеров по умолчанию, но для этого есть некоторые другиепреимущества, если вы хотите настроить макет и т. д.

Answer 4

Я сделал так, чтобы одна переменная (наивысшая Z) установила zIndex для всех моих маркеров (в моем случае это было сделано с помощью полилиний) и приращений, а также одну переменную для временного хранения z-индекса любого маркера i "наведение мыши" на:

Установить переменные как глобальные:

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

Итак, этот вопрос был год назад, но я кое-что понял и подумал, что другие могут это оценить.Там даже значки ролловеров участвуют в качестве бонуса.Я имею дело с тысячами автобусных и железнодорожных остановок, поэтому мне это показалось очень эффективным.

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 }); });
});