Folleto / capa base / marcadores de Google Map no visibles

8

Nuevo en Leaflet, actualmente tratando de migrar un proyecto de Google Maps nativo a Leaflet; haber sido atraído a Leaflet por la gestión de capas y las opciones de utilizar mejores mapas base de estilo 'hoja de ruta'.

He descargado el complemento para usar los mosaicos de Google Map como mapa base para Leaflet, y funciona muy bien como capa base.

Sin embargo, he encontrado un problema y no tengo suficiente experiencia con Leaflet para entender por qué. Tengo marcadores que son visibles con cualquier otra capa base, pero no con Google. He intentado forzar el orden Z alto (1000, etc.) pero no hay diferencia. La opacidad de los marcadores está llena 1.0

Los marcadores son visibles en todas las otras capas (por ejemplo, OSM), cuando cambio la base a Google (satélite o mapa) ya no se muestran, pero vuelvo a una base que no es de Google y están allí nuevamente.

La razón por la que busco la capa base de Google es que Google es (hasta donde yo sé) el único proveedor de mosaicos fotográficos aéreos consistentes detallados para mi región de interés. Desea usar otros mapas pero tiene la opción de cambiar a una vista de 'satélite' de Google a través del administrador de capas.

Actualmente usando el Folleto v0.4.5 (pero también probé el v0.4), los mismos síntomas ocurren usando diferentes navegadores (IE, FF, etc.).

Agradecería cualquier ayuda.

google-maps leaflet markers Dave Martin
fuente

Respuestas:

13

Solo una solución rápida: estabas en el camino correcto con el índice z. Intente agregar esto a su propio archivo css (¡puede romper otras cosas! Simplemente lo hice para mostrar los marcadores):

.leaflet-map-pane {
    z-index: 2 !important;
}

.leaflet-google-layer {
    z-index: 1 !important;
}
AndyL
fuente
Andy, muchas gracias, eso lo solucionó perfectamente y no hay otros efectos secundarios que pueda ver (¡al menos hasta ahora!). Había estado mirando el folleto del código del complemento de Google Maps y descubrí que utiliza "insertAtTheBottom", que entiendo que ahora está en desuso. Dave
Dave Martin el
0

He descargado el complemento para usar los mosaicos de Google Map como mapa base para Leaflet

Para ser claros, esto va en contra de los términos de servicio de Google, así que proceda con precaución.

tmcw
fuente
1
No si está usando ( psha.org.ru/leaflet/Google.js ), que supongo que es lo que está usando. Está escrito a través de la API de mapas, por lo que no es una violación de TOS.
AndyL
Tom / Andy, gracias por los comentarios. Tom: todavía usamos Google Maps "nativamente" para mapas estáticos y donde necesito mostrar un sitio único o un tipo de sitio único. Sin embargo, estoy tratando de migrar la sección que muestra muchos marcadores de diferentes tipos para que podamos utilizar el cambio de capa de Leaflet (y también cambiar a proveedores de mapas base alternativos). Lo siento si mi mensaje original no lo dejó claro, pero estamos haciendo esto, como Andy mencionó, mediante el uso del complemento Leaflet Google Maps que a su vez usa la API de Google Maps v3; no estamos tratando de llamar al Azulejos directamente. Dave
Dave Martin el
0

Algunos otros números en los índices z, que se muestran en otra parte, funcionaron en mi extremo. Publicación cruzada desde aquí: https://gist.github.com/crofty/2197042#comment-1234339

.leaflet-google-layer{
    z-index: 0 !important;
}
.leaflet-map-pane{
    z-index: 100;
}

(pon esto en la <style>sección o CSS de tu página web )

Nikhil VJ
fuente
0

Intenta poner esto en tu CSS:

.leaflet-google-layer {
    z-index: inherit;
}

Esto me ayudó en la misma situación.

Cuerno
fuente