Superposition d'index z dans google maps version 3

Question

J'essaie d'obtenir une superposition dans google maps api v3 pour apparaître au-dessus de tous les marqueurs. Mais il semble que le google api a toujours mis ma superposition avec la plus faible priorité z-index. La seule solution que j'ai trouvée consiste à itérer à travers l'arborescence DOM et à définir manuellement z-index à une valeur plus élevée. Mauvaise solution.

J'ajoute un nouveau mon div à ma superposition avec:

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

J'ai essayé tous les biens que je pouvais penser, tout en créant ma superposition. zIndex, zPriority etc.

J'ajoute ma superposition avec:

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

Et GmapOverlay hérite de nouveaux google.maps.OverlayView.

Des idées?

..fredrik

Answer 1

Vous ne pouvez pas modifier le zIndex d'un OverlayView (il n'a pas ces biens), mais il détient des vitres qui contient des noeuds DOM. C'est là que vous pouvez utiliser la propriété z-index;

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

Answer 2

Réglage z-index à 104 pour la couche overlay semble être le « magique » nombre » si vous vous souciez d'interagir avec les marqueurs (c.-à-traînantes marqueurs). Plus haut que 104 et vous ne pouvez pas interagir avec . les marqueurs Vous vous demandez s'il y a une solution moins fragile ...

Answer 3

Si quelqu'un a le même problème que moi, voici mon problème et la solution:

je besoin d'un OverlayView qui ajouterait infobulles à des marqueurs , mais ma superposition contextuelle affichait derrière les marqueurs

I mis en œuvre une sous-classe de la OverlayView selon la documentation Google: https://developers.google.com/maps/documentation/javascript/customoverlays

Lorsque vous écrivez votre fonction personnalisée OverlayView.prototype.onAdd, vous devez préciser à quel volet pour attacher votre superposition. Je viens de copier le code sans réellement lire l'explication environnante.

Dans leur code, ils attachent le revêtement dans le volet overlayLayer:

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

Mais il y a beaucoup de MapPanes différents que vous pouvez utiliser:

« L'ensemble des vitres, des MapPanes de type, spécifiez l'ordre d'empilement pour les différentes couches sur la carte Les panneaux suivants sont possibles et énumérés dans l'ordre dans lequel ils sont empilés de bas en haut: "

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

Je voulais la superposition de planer sur toutes les autres informations sur la carte, donc j'utilisé le volet floatPane et problème résolu.

Ainsi, au lieu de:

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

vous utilisez ceci:

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

Answer 4

Utilisez panes.overlayMouseTarget.appendChild

Si vous souhaitez autoriser votre couche à travers ciblable clics de la souris (et utiliser des événements tels que "click" ou CSS pseudo :: hover) alors vous devez ajouter votre superposition à la carte en utilisant overlayMouseTarget

var panes = this.getPanes();

panes.overlayMouseTarget.appendChild (this.div_);

voir aussi: https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapPanes

Answer 5

Afin de pouvoir jouer avec la paneType de la classe mapLabel, j'ai ajouté une propriété paneType à la classe MapLabel de la bibliothèque utilitaire google (https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/maplabel/src/maplabel.js?r=303).

Ceci est utile pour que l'étiquette ne soit pas masquée par une polyligne.

Veuillez trouver les ajouts de code au fichier 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); 
} 

Exemple de code utilisant le 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', 
    }); 

Merci!