É possível esmaecer um mapa do Google Maps, exceto em algumas áreas?

15

O que estou procurando é uma maneira de enfatizar uma determinada área em um mapa do Google Maps, esmaecendo o resto do mundo.

Ouvi falar de uma solução usando 2 polígonos, dos quais 1 é visível e o outro não, e que só funciona se o mapa for estático (sem movimento do mapa). No entanto, eu quero que o usuário seja capaz de ampliar e arrastar o mapa.

Também estou interessado em outras maneiras em que não pensei em enfatizar uma área.

atualizar:

Quando tento a solução postada por radek (ou seja, criando um KML com um polígono com um outerBoundaryIs (maior que a exibição) e um innerBoundaryIs (sendo uma área a ser enfatizada)), recebo o problema de que, quando eu zoom, áreas retangulares não são cobertas por o polígono circundante mais. Vejo:

insira a descrição da imagem aqui

Alguém com experiência / solução para isso?

update2:

Finalmente tive tempo de testar a solução da radek usando o Google Fusion Tables. No começo, tive os mesmos problemas com os blocos ausentes como no KML (veja a figura acima), mas após outra carga, parece que ele havia pegado e estava mostrando os blocos totalmente corretos. Tenho a sensação de que o jquery hack em sua solução foi feito para blocos que não estavam carregando:

setTimeout(function(){ 
        $("img[src*='googleapis']").each(function() { 
            $(this).attr("src",$(this).attr("src")+"&"+(new Date()).getTime()); 
        }); 
    }, 5000);

Como os ladrilhos pareciam carregar após uma atualização, eu mesmo não usei o hack. Se o erro ocorrer para cada novo usuário, experimentarei com ele.

mrg
fonte

Respostas:

18

O blog do Google Maps Mania aponta para o exemplo do mapa de limites administrativos suíços :

insira a descrição da imagem aqui

O código do Vasile está no github .

radek
fonte
1
Isso realmente mostra a funcionalidade que estou procurando! Vou ter que mergulhar na fonte para ver se é facilmente implementável no meu caso. Eles estão falando sobre hacks (eu imediatamente tenho medo do IE7).
mrg
O uso do Google Fusion Tables é obrigatório neste exemplo? Eu não estou usando isso no momento. Vou baixar o código do github e verificar quais são os requisitos.
mrg
2
Tudo se resume a criar um polígono no KML com um outerBoundaryIs, sendo o mundo e um innerBoundaryIs, sendo sua área de interesse. Além de ter dificuldade em modelar a transparência, continuo fazendo furos na camada semi-transparente ao aumentar o zoom. Alguém tem alguma experiência com isso?
Mrg
1
Os KMLs são bastante lentos no carregamento, portanto, alterá-lo o tempo todo pode causar um efeito muito preguiçoso. Além disso, não precisaria mudar o nome constantemente para garantir que o kml antigo não seja armazenado em cache? Sinto que preciso do conhecimento do Google Fusion Tables.
Mrg
1
Existe uma implementação mais simples, que pode usar um arquivo KML em vez do FusionTables? Eu só preciso destacar 1 área contínua (limites da cidade) e esmaecer todo o resto. Eu olhei o código do Vasile, mas é realmente complicado e parece depender de hackers no navegador. Além disso, se essa solução puder usar a sugestão de elrobis de tornar a janela do mapa a base para o efeito de acinzentado, acho que será muito mais estável / rápido. {desenhe um limite em torno da cidade e pinte-o} // feito {acinzentará tudo, EXCETO a área dentro do limite} ??????????????
user1845528
3

se a ferramenta que a @radek postou não o ajudou, existe outra que usa os recursos simples do google.maps.Polygon: http://maps.vasile.ch/geomask/

Basicamente, ele segue o algoritmo do número do enrolamento: o polígono da máscara (universo) é digitalizado no sentido horário e todos os polígonos internos são digitalizados no sentido anti-horário http://en.wikipedia.org/wiki/Winding_number

Vasile Cotovanu
fonte