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

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

или есть лучше способ его реализации ??

6
google-maps google-maps-api-3

5 ответов

'этот.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;

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

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

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

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

задайте переменные как глобальные:

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

и, наконец, просто наведите курсор мыши и обработчики событий 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
            });

мой ответ, вероятно, прост, и общий и, конечно, неполный, чтобы сосредоточиться только на проблеме, надеюсь, вы можете работать дальше, чтобы соответствовать вашему проекту.

0

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

0