¿Es posible atenuar un mapa de Google Maps excepto en alguna área?

15

Lo que estoy buscando es una forma de enfatizar un área determinada en un mapa de Google Maps atenuando el resto del mundo.

Escuché sobre alguna solución de usar 2 polígonos, uno de los cuales es visible y el otro no, y que solo funciona si el mapa es estático (sin movimiento del mapa). Sin embargo, quiero que el usuario pueda hacer zoom y arrastrar el mapa.

También estoy interesado en otras formas en las que no he pensado enfatizar un área.

actualizar:

Cuando pruebo la solución publicada por radek (es decir, creando un KML con un Polígono con un OutsideBoundaryIs (más grande que la vista) y un innerBoundaryIs (siendo un área para enfatizar)) Tengo el problema de que cuando hago zoom, las áreas rectangulares no están cubiertas por el polígono circundante más. Ver:

ingrese la descripción de la imagen aquí

¿Alguien con experiencia / solución a eso?

actualización2:

Finalmente tuve tiempo de probar la solución de radek usando Google Fusion Tables. Al principio tuve los mismos problemas con los mosaicos faltantes que con KML (vea la imagen de arriba), pero después de otra carga parece que se había recuperado y mostraba los mosaicos totalmente correctos. Tengo la sensación de que el truco de jquery en su solución fue para azulejos que no se estaban cargando:

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

Como las baldosas parecían cargarse después de una actualización, no he usado el truco yo mismo. Si el error ocurre para cada nuevo usuario, experimentaré con él.

MRG
fuente

Respuestas:

18

El blog de Google Maps Mania señala un ejemplo del mapa de límites administrativos suizo :

ingrese la descripción de la imagen aquí

El código de Vasile está en github .

radek
fuente
1
De hecho, esto muestra la funcionalidad que estoy buscando. Tendré que sumergirme en la fuente para ver si es fácilmente implementable en mi caso. Están hablando de hacks (inmediatamente tengo miedos de IE7).
mrg
¿Es obligatorio el uso de Google Fusion Tables en este ejemplo? No estoy usando eso en este momento. Descargaré el código github y comprobaré cuáles son los requisitos.
mrg
2
Todo se reduce a hacer un Polígono en KML con un OutsideBoundaryIs, siendo el mundo y un innerBoundaryIs, siendo su área de interés. Además de tener dificultades para diseñar la transparencia, sigo obteniendo agujeros en mi capa semitransparente cuando hago zoom. ¿Alguien tiene alguna experiencia con eso?
mrg
1
Los archivos KML tardan bastante en cargarse, por lo que cambiarlos todo el tiempo puede dar un efecto muy lento. Aparte de eso, ¿no tendría que cambiar el nombre constantemente para asegurarme de que el viejo kml no se almacene en caché? Tengo la sensación de que necesito el conocimiento de Google Fusion Tables.
mrg
1
¿Existe una implementación más simple que pueda usar un archivo KML en lugar de FusionTables? Solo necesito resaltar en color 1 área continua (límites de la ciudad) y atenuar todo lo demás. He visto el código de Vasile, pero es realmente complicado y parece depender de los hacks del navegador. Además, si esta solución puede usar la sugerencia de elrobis de hacer que la ventana del mapa sea la base del efecto de oscurecimiento , creo que será mucho más estable / más rápido. {dibuje un límite alrededor de la ciudad y coloréelo} // hecho {atenuar todo excepto el área dentro del límite} ??????????????
usuario1845528
3

si la herramienta que publicó @radek no lo ayudó, hay otra que está usando las características simples de google.maps.Polygon: http://maps.vasile.ch/geomask/

Básicamente sigue el algoritmo de número de bobinado: el polígono de máscara (universo) se digitaliza en sentido horario y todos los polígonos interiores se digitalizan en sentido antihorario http://en.wikipedia.org/wiki/Winding_number

Vasile Cotovanu
fuente