z-Index de superposition dans google maps version 3

Je vais essayer d'obtenir un recouvrement dans l'api google maps v3 pour apparaître au-dessus de tous les marqueurs. Mais il semble que l'api de google mets toujours mes superposition avec le moins de z-index de priorité. Seule solution que j'ai trouvé est d'itérer jusqu'à travers l'arbre du DOM et de définir manuellement le z-index pour une valeur plus élevée. Mauvaise solution.

Je vais ajouter à mes un nouveau div de mon 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 pourrais penser lors de la création de mon superposition. zIndex, zPriority etc.

Je vais ajouter mon superposition avec:

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

Et GmapOverlay hérite de google.cartes.OverlayView.

Des idées?

..fredrik

InformationsquelleAutor fredrik | 2010-04-21

google-maps javascript

28

Vous ne pouvez pas changer le zIndex d'un OverlayView (il n'a pas de tels biens), mais il y a des volets qui contient les nœuds DOM. C'est là que vous pouvez utiliser la propriété z-index;
```
...
lngLatXYposition = $.view.overlay.getPanes().overlayLayer.style['zIndex'] = 1001;
...
```
- C'est la réponse précise à la question. Je ne vois pas pourquoi il n'est pas accepté.
- Cela vient vraiment d'un hack. Voir les autres en haut du classement de réponse pour une solution plus robuste.
InformationsquelleAutor Björn
26

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

J'ai besoin d'un OverlayView qui permettrait d'ajouter des info-bulles pour les marqueurs, mais mon menu contextuel de superposition ne cessaient de derrière les marqueurs.

J'ai mis en place une sous-classe de la OverlayView comme par Google de la documentation:
https://developers.google.com/maps/documentation/javascript/customoverlays

Lorsque vous écrivez votre propre OverlayView.prototype.onAdd fonction, vous devez spécifier à quel Volet de joindre votre superposition. J'ai juste copié le code, sans devoir lire les environs explication.

Dans leur code, ils attachent la superposition de la overlayLayer volet:
```
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
```
Mais il ya beaucoup de différents MapPanes vous pouvez utiliser:

"L'ensemble des volets de type MapPanes, spécifier l'ordre d'empilement des différentes couches sur
la carte. Les volets 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, j'ai donc utilisé le floatPane volet et le problème est résolu.

Donc, au lieu de :
```
this.getPanes().overlayLayer.appendChild(div)
```
vous utilisez ce :
```
this.getPanes().floatPane.appendChild(div);
```
- J'ai édité la réponse auprès d'un échantillon ciselée. Cela devrait en fait être la bonne réponse, pas une avec un z-index de piratage.
- Merci pour cela, n'aurait jamais connu au sujet de floatPane. C'est la bonne façon de le faire.
- Cela devrait vraiment être la bonne réponse.
- Ce n'est plus une liste valide des couches utilisées dans la carte. Mise à jour de la documentation est ici: developers.google.com/maps/documentation/javascript/3.exp/...
- Merci beaucoup pour cette.
- Mise à jour, merci!
- Brillant. Corrigé mon problème.
InformationsquelleAutor Mikepote

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

C'est utile pour créer l'étiquette de ne pas être cachés par une polyligne.

Veuillez trouver le code ajouts à la mapLabel.js fichier.

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 la 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!

InformationsquelleAutor Gabriel

0

Paramètre z-index à 104 pour la couche de recouvrement semble être la "magie" nombre" si vous vous souciez de l'interaction avec les marqueurs (c'est à dire en faisant glisser les marqueurs). Plus que 104 et vous ne pouvez pas interagir avec les marqueurs. Vous vous demandez si il est moins cassant solution...
- nombre magique.
InformationsquelleAutor psorr
0

Utiliser les panneaux.overlayMouseTarget.appendChild

Si vous souhaitez permettre à votre couche de ciblable par les clics de la souris (et de l'utilisation des manifestations telles que "cliquez sur" CSS ou pseudo ::hover), alors vous devez ajouter votre superposition de la carte à l'aide de overlayMouseTarget

var volets = ce.getPanes();

volets.overlayMouseTarget.appendChild(ce.div_);

Voir aussi:
https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapPanes
- Mon premier problème avec cela, c'était quand j'ai été en utilisant les volets.overlayLayer.appendChild... de commutation à overlayMouseTarget résolu.
InformationsquelleAutor Layke
0

Avertissement: c'est un peu louches solution qui peut cesser de fonctionner à tout moment et vous ne devriez pas l'utiliser en production.

Pour ceux qui recherchent un moyen rapide et sale de la solution, cette CSS a fonctionné pour moi:
```
.gm-style > div:first-child > div:first-child > div:nth-child(4) {
  z-index: 99 !important;
}
```
Utiliser à vos risques et périls!

InformationsquelleAutor Clamburger

Vous devez vous connecter pour publier un commentaire.