Est-il possible de griser une carte Google Maps, sauf pour certaines zones?

15

Ce que je recherche, c'est un moyen de mettre en évidence une certaine zone sur une carte Google Maps en grisonnant le reste du monde.

J'ai entendu parler d'une solution consistant à utiliser 2 polygones dont 1 est visible et l'autre non et que cela ne fonctionne que si la carte est statique (pas de mouvement de carte). Cependant, je veux que l'utilisateur puisse zoomer et faire glisser la carte.

Je suis également intéressé par d'autres moyens auxquels je n'ai pas pensé pour mettre l'accent sur un domaine.

mise à jour:

Lorsque j'essaie la solution publiée par radek (c'est-à-dire la création d'un KML avec un polygone avec un externalBoundaryIs (plus grand que la vue) et un innerBoundaryIs (étant une zone à souligner)), j'ai le problème que lorsque je fais un zoom avant, les zones rectangulaires ne sont pas couvertes par le polygone environnant plus. Voir:

entrez la description de l'image ici

Quelqu'un ayant de l'expérience / une solution à cela?

update2:

J'ai enfin eu le temps de tester la solution de radek à l'aide de Google Fusion Tables. Au début, j'ai eu les mêmes problèmes avec les tuiles manquantes qu'avec KML (voir l'image ci-dessus), mais après un autre chargement, il semble qu'il ait ramassé et il montrait que les tuiles étaient totalement correctes. J'ai le sentiment que le hack jquery dans sa solution était destiné aux tuiles qui ne se chargeaient pas:

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

Comme les tuiles semblaient se charger après un rafraîchissement, je n'ai pas utilisé le hack moi-même. Si le bogue se produit pour chaque nouvel utilisateur, je l'expérimenterai.

google-maps polygon kml area region mrg
la source

Réponses:

18

Le blog Google Maps Mania donne un exemple de carte des limites administratives suisses :

entrez la description de l'image ici

Le code de Vasile est sur github .

radek
la source
1
Cela affiche en effet la fonctionnalité que je recherche! Je vais devoir plonger dans la source pour voir si elle est facilement implémentable dans mon cas. Ils parlent de hacks (j'ai immédiatement des craintes IE7).
mrg
L'utilisation de Google Fusion Tables est-elle indispensable dans cet exemple? Je n'utilise pas cela pour le moment. Je vais télécharger le code github et vérifier quelles sont les exigences.
mrg
2
Cela revient à créer un polygone en KML avec un externalBoundaryIs, le monde et un innerBoundaryIs, votre domaine d'intérêt. En plus d'avoir du mal à styliser la transparence, je continue à avoir des trous dans ma couche semi-transparente lorsque je fais un zoom avant. Quelqu'un a-t-il une expérience avec cela?
mrg
1
Le chargement des KML est plutôt lent, donc le changer tout le temps peut donner un effet très paresseux. En dehors de cela, ne devrais-je pas changer le nom constamment pour m'assurer que l'ancien kml ne soit pas mis en cache? J'ai le sentiment que j'ai besoin de connaissances sur Google Fusion Tables.
mrg
1
Existe-t-il une implémentation plus simple, qui peut utiliser un fichier KML au lieu de FusionTables? Il me suffit de mettre en surbrillance 1 zone continue (limites de la ville) et de griser tout le reste. J'ai regardé le code de Vasile, mais c'est vraiment compliqué et semble dépendre des hacks du navigateur. De plus, si cette solution peut utiliser la suggestion d' elrobis de faire de la fenêtre de carte la base de l'effet de grisé, je pense qu'elle sera beaucoup plus stable / plus rapide. {dessinez une frontière autour de la ville et coloriez-la} // terminé {grisez tout sauf la zone à l'intérieur de la frontière} ??????????????
user1845528
3

si l'outil publié par @radek ne vous a pas aidé, il y en a un autre qui utilise les fonctionnalités simples de google.maps.Polygon: http://maps.vasile.ch/geomask/

Fondamentalement, il suit l'algorithme du nombre d'enroulement: le polygone de masque (univers) est numérisé dans le sens horaire et tous les polygones intérieurs sont numérisés dans le sens antihoraire http://en.wikipedia.org/wiki/Winding_number

Vasile Cotovanu
la source