Folheto / camada base do Google Maps / marcadores não visíveis

8

Novo no Leaflet, atualmente tentando migrar um projeto do Google Maps nativo para o Leaflet; tendo sido atraídos para o Leaflet pelo gerenciamento de camadas e pelas opções de uso de melhores mapas de base de estilo 'roadmap'.

Transferiu o plug-in para usar os blocos do Google Map como um mapa base do Leaflet e funciona muito bem como uma camada base.

No entanto, encontrei um problema e não tenho experiência suficiente com o Leaflet para entender o porquê. Tenho marcadores que são visíveis em qualquer outra camada de base - mas não no Google. Tentei forçar a ordem Z alta (1000 etc.), mas isso não faz diferença. A opacidade dos marcadores está cheia 1.0

Os marcadores são visíveis em todas as outras camadas (por exemplo, OSM), quando alterno a base para o Google (satélite ou mapa), eles não são mais exibidos, mas voltamos para uma base que não é do Google e estão lá novamente.

A razão pela qual estou buscando a camada base do Google é que o Google é (até onde eu sei) o único fornecedor de quadros fotográficos aéreos detalhados e consistentes para minha região de interesse. Deseja usar outros mapas, mas tem a opção de alternar para a visualização "satélite" do Google por meio do gerenciador de camadas.

Atualmente, usando o Leaflet v0.4.5 (mas também tentaram a v0.4), os mesmos sintomas ocorrem em navegadores diferentes (IE, FF etc.).

Ficaria grato por qualquer ajuda.

google-maps leaflet markers

— Dave Martin
fonte

13

Apenas uma solução rápida: você estava no caminho certo com o z-index. Tente adicionar isso ao seu próprio arquivo css (pode quebrar outras coisas! Simplesmente consegui exibir os marcadores):

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

.leaflet-google-layer {
    z-index: 1 !important;
}

— AndyL
fonte

Andy, Muito obrigado mesmo - isso corrigiu perfeitamente e nenhum outro efeito colateral que eu possa ver (pelo menos até agora!). Estava vendo o código do plug-in do Google Maps e descobriu que ele utiliza "insertAtTheBottom", que eu entendo que agora está obsoleto. Dave

— Dave Martin

0

Transferiu o plug-in para utilizar blocos do Google Map como mapa base do Leaflet

Só para esclarecer, isso é contrário aos Termos de Serviço do Google, portanto, prossiga com cuidado.

— tmcw
fonte

1

Não se ele estiver usando ( psha.org.ru/leaflet/Google.js ), que eu assumo é o que ele está usando. É escrito através da API do Google Maps, portanto, não é uma violação dos Termos de Serviço.

— andyl

Tom / Andy, Obrigado pelos comentários. Tom - ainda usamos o Google Maps "nativamente" para mapas estáticos e onde preciso mostrar um único site ou tipo único de site. No entanto, estou tentando migrar a seção que mostra muitos marcadores de tipos diferentes, para que possamos utilizar a alternância de camadas do Leaflet (e também mudar para provedores de mapas base alternativos). Sinto muito se minha mensagem original não deixou isso claro, mas estamos fazendo isso, como Andy mencionou, usando o plug-in Leaflet Google Maps, que por sua vez usa a API do Google Maps v3 - não estamos tentando chamar o telhas diretamente. Dave

— Dave Martin

0

Alguns outros números nos índices z, mostrados em outros lugares, funcionaram do meu lado. Postagem cruzada a partir daqui: https://gist.github.com/crofty/2197042#comment-1234339

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

(coloque isso no CSS ou na <style>seção da sua página da web )

— Nikhil VJ
fonte

0

Tente colocar isso em seu css:

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

Isso me ajudou na mesma situação

— Chifre
fonte