cambiar el índice z de marcador al colocar el cursor sobre él para hacer que sea visible

Question

Estoy intentando hacer que el marcador en el que estoy actualmente tenga un mayor índice Z que los demás, por lo que incluso si está oculto por otros marcadores aparecerá obtener visibilidad total cuando estoy sobre él.

Al hacer clic en cualquier marcador quiero hacer lo mismo.

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

Pero con esto yo sería infinitamente aumentar el índice z .. ¿hay alguna otra manera en la que puedo tener el invertir de nuevo al desplazar o haga clic en cualquier otro marcador. .

¿O hay alguna forma mejor de implementarlo?

Answer 1

'this.getZIndex()' siempre devuelve 'indefinido' si no ha configurado previamente un zIndex en el marcador, ya sea al inicializarlo en primer lugar o al usar la función setOption().

Su secuencia de comandos también puede no funcionar al 100% si hay más de 100 marcadores.

He creado un mapa muy simple a continuación que contiene 2 marcadores, ligeramente superpuestos. Al pasar por encima de uno de los marcadores de esta forma se establece la zIndex al más alto necesario para llevarlo a la cima, y ​​luego volver de nuevo a lo que era antes en 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

Así que esta pregunta era una Hace un año, pero me di cuenta de algo y pensé que otros podrían apreciarlo. Incluso hay reinversiones de iconos involucradas como una bonificación. Estoy lidiando con miles de paradas de autobús y tren que se muestran, así que resultó ser bastante eficiente para mí.

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

La forma lo hice era tener una variable (highestZ) establece la zIndex para todos mis marcadores (en mi caso lo hice con polilíneas) y los incrementos, y una variable para mantener temporalmente el índice z de lo que marca i "mouseover" en:

defina las variables como mundial:

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

Luego, cuando la construcción/inicializar las opciones de marcador sólo tiene que añadir este

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

muestra (lo hice mía en un bucle):

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

Y, finalmente, acaba de hacer pasar el ratón y eventos mouseout manipuladores como este:

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

Mi respuesta es probablemente simple, y general y, por supuesto, incompleto para enfocarse solo en el problema, con suerte puede trabajar más para adaptarse a su proyecto.

Answer 5

Creo que la forma más sencilla es utilizar CSS en lugar de Javascript:

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

Esto no significa que tenga que utilizar CustomOverlays (https://developers.google.com/maps/documentation/javascript/customoverlays#introduction) en lugar de marcadores por defecto, pero que tiene algunas otras ventajas también, si desea personalizar el diseño, etc.