javascript - georreferenciación - google maps free api

Superposición de z-Index 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 de índice z más baja. La única solución que he encontrado es iterar a través del árbol DOM y establecer manualmente el índice z en un valor más alto. Mala solución.

Estoy agregando mi nuevo div a mi superposición 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 se me ocurrieron al crear mi superposición. Índice z, índice z, etc.

Estoy agregando mi superposición con:

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

Y GmapOverlay hereda de google.maps.OverlayView nuevo.

¿Algunas ideas?

..fredrik

Answer 1

Establecer el índice z en 104 para la capa superior parece ser el "número" mágico "si le interesa interactuar con los marcadores (es decir, arrastrar marcadores). Si es superior a 104 y no puede interactuar con los marcadores. Se pregunta si hay Una solución menos frágil ...

Answer 2

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

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

Answer 3

Para poder jugar con el paneType de la clase mapLabel, agregué una propiedad paneType a la clase MapLabel de la biblioteca de utilidades 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 hacer que la etiqueta no quede oculta por una polilínea.

Encuentre 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 muestra usando el tipo de panel:

    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!

Answer 4

Si alguien tenía el mismo problema que yo, aquí está mi problema y mi solución:

Necesitaba un OverlayView que agregaría información sobre herramientas a los marcadores, pero mi superposición emergente seguía mostrándose detrás de los marcadores.

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

Cuando escribe su función personalizada OverlayView.prototype.onAdd , debe especificar en qué panel adjuntar su superposición. Acabo de copiar el código sin leer realmente la explicación que lo rodea.

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

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

Pero hay muchos MapPanes diferentes que puedes usar:

"El conjunto de paneles, de tipo MapPanes, especifica 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 hacia arriba:"

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

Quería que la superposición se desplazara sobre el resto de la información en el mapa, así que utilicé el panel floatPane y resolví el problema.

Entonces, en lugar de:

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

usas esto:

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

Answer 5

Utilice panes.overlayMouseTarget.appendChild

Si desea permitir que su capa se pueda segmentar a través de clics del mouse (y use eventos como "clic" o pseudo :: hover CSS), debe agregar su superposición al mapa usando overlayMouseTarget

var panes = this.getPanes ();

panes.overlayMouseTarget.appendChild (this.div_);

También vea: https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapPanes