z-Index overlay en google maps versión 3

Question

Estoy tratando de obtener una superposición en google maps api v3 para que aparezca sobre todos los marcadores. Pero parece que la API de Google siempre pone mi superposición con la prioridad más baja del índice z. La única solución que he encontrado es iterar hacia arriba a través del árbol DOM y configurar manualmente el índice Z a un valor más alto. Mala solución.

estoy añadiendo mi un nuevo div a mi plantilla con:

onclick : function (e) { 
    var index = $(e.target).index(), 
     lngLatXYposition = $.view.overlay.getProjection().fromLatLngToDivPixel(this.getPosition()); 
     icon = this.getIcon(), 
     x = lngLatXYposition.x - icon.anchor.x, 
     y = lngLatXYposition.y - icon.anchor.y 

    $('<div>test</div>').css({ left: x, position: 'absolute', top: y + 'px', zIndex: 1000 }).appendTo('.overlay'); 
} 

He intentado todas las propiedades que podía pensar, mientras que la creación de mi plantilla. zIndex, etc. zPriority

estoy añadiendo mi plantilla con:

$.view.overlay = new GmapOverlay({ map: view.map.gmap }); 

Y GmapOverlay hereda de nuevo google.maps.OverlayView.

¿Alguna idea?

..fredrik

Answer 1

No se puede cambiar el zIndex de un OverlayView (que no tiene tal propiedad), pero tiene paneles que contiene nodos DOM. Ahí es donde puede usar la propiedad z-index;

... 
lngLatXYposition = $.view.overlay.getPanes().overlayLayer.style['zIndex'] = 1001; 
... 

Answer 2

Configuración índice z a 104 para la capa de superposición parece ser el número "mágico"" si se preocupan por la interacción con los marcadores (marcadores por ejemplo, arrastrando). Cualquier superior a 104 y no se puede interactuar con . los marcadores se pregunta si existe una solución menos frágil ...

Answer 3

Si alguien estaba teniendo el mismo problema que yo, aquí está mi problema y la solución:

necesitaba una OverlayView que se sumaría a la información de herramientas de marcadores , pero mi superposición emergente siguió mostrando detrás de los marcadores.

que implementa una subclase de la OverlayView según la documentación de Google: https://developers.google.com/maps/documentation/javascript/customoverlays

Cuando se escribe la función personalizada OverlayView.prototype.onAdd, es necesario especificar a qué panel para adjuntar la superposición. Acabo de copiar el código sin leer realmente la explicación que lo rodea.

En su código, que conceden la superposición al panel overlayLayer:

var panes = this.getPanes(); 
panes.overlayLayer.appendChild(div); 

pero hay muchas MapPanes diferentes que puede utilizar:

"El conjunto de paneles, de MapPanes tipo, especifique el orden de apilamiento para diferentes capas en el mapa. Los siguientes paneles son posibles y se enumeran en el orden en que se apilan de abajo arriba: "

• MapPanes.mapPane (Nivel 0)
• MapPanes.overlayLayer (Nivel 1)
• MapPanes.markerLayer (Nivel 2)
• MapPanes.overlayMouseTarget (Nivel 3)
• MapPanes.floatPane (Nivel 4)

quería la superposición que se ciernen sobre toda otra información en el mapa, así que utiliza el panel floatPane y problema resuelto.

Así, en lugar de:

this.getPanes().overlayLayer.appendChild(div) 

utiliza este:

this.getPanes().floatPane.appendChild(div); 

Answer 4

Uso panes.overlayMouseTarget.appendChild

Si desea permitir que la capa sea objeto de orientación a través clics del mouse (y usa eventos como "clic" o CSS pseudo :: hover) luego debes agregar tu superposición al mapa usando overlayMouseTarget

var panes = this.getPanes();

panes.overlayMouseTarget.appendChild (this.div_);

Véase también: https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapPanes

Answer 5

Con el fin de ser capaz de jugar un poco con el paneType de la clase mapLabel, he añadido una propiedad paneType a la clase MapLabel de la biblioteca de utilidad de Google (https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/maplabel/src/maplabel.js?r=303).

Esto es útil para que la etiqueta no esté oculta por una polilínea.

Busque las adiciones de código al archivo mapLabel.js.

MapLabel.prototype.onAdd = function() { 
    var canvas = this.canvas_ = document.createElement('canvas'); 
    var style = canvas.style; 
    style.position = 'absolute'; 

    var ctx = canvas.getContext('2d'); 
    ctx.lineJoin = 'round'; 
    ctx.textBaseline = 'top'; 

    this.drawCanvas_(); 

    var panes = this.getPanes(); 
    if (panes) { 
    // OLD: panes.mapPane.appendChild(canvas) 
    var paneType = this.get('paneType'); 
    panes[paneType].appendChild(canvas); 
    } 
}; 

MapLabel = function (opt_options) { 
    this.set('fontFamily', 'sans-serif'); 
    this.set('fontSize', 12); 
    this.set('fontColor', '#000000'); 
    this.set('strokeWeight', 4); 
    this.set('strokeColor', '#ffffff'); 
    this.set('align', 'center'); 

    this.set('zIndex', 1e3); 
    this.set('paneType', 'floatPane'); 

    this.setValues(opt_options); 
} 

Código de ejemplo utilizando el paneType:

var mapLabel = new MapLabel({ 
     text: segDoc.curr_value.toFixed(0), 
     position: new google.maps.LatLng(lblLat, lblLng), 
     map: map.instance, 
     fontSize: 12, 
     align: 'center', 
     zIndex: 10000, 
     paneType: 'floatPane', 
    }); 

Gracias!