Можно ли выделить карты Google Карты серым цветом, кроме какой-либо области?

15

То, что я ищу, - это способ выделить определенную область на карте Google Maps, выделяя остальной мир.

Я слышал о каком-то решении использовать 2 многоугольника, из которых 1 виден, а другой нет, и что он работает только в том случае, если карта статична (нет движения карты). Однако я хочу, чтобы пользователь мог масштабировать и перетаскивать карту.

Я также интересуюсь другими способами, о которых я не думал, чтобы подчеркнуть область.

Обновить:

Когда я пробую решение, опубликованное radek (т.е. создаю KML с Polygon с externalBoundaryIs (больше, чем view) и innerBoundaryIs (являющийся областью для выделения)), я получаю проблему, что при увеличении масштаба прямоугольные области не покрываются окружающий полигон больше. Видеть:

введите описание изображения здесь

Кто-нибудь с опытом / решением этого?

Update2:

Наконец-то у меня было время протестировать решение Radek с помощью Google Fusion Tables. Сначала у меня были те же проблемы с отсутствующими плитками, что и с KML (см. Рисунок выше), но после другой загрузки кажется, что он поднялся и показывал плитки полностью правильно. У меня такое ощущение, что хакер jquery в его решении предназначался для плиток, которые не загружались:

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

Поскольку плитки, казалось, загружались после обновления, я не использовал взломать сам. Если ошибка возникает для каждого нового пользователя, я буду экспериментировать с ней.

MRG
источник

Ответы:

18

Блог Google Maps Mania указывает на пример карты административных границ Швейцарии :

введите описание изображения здесь

Код от Василе находится на github .

Радек
источник
1
Это действительно отображает функциональность, которую я ищу! Мне придется погрузиться в источник, чтобы увидеть, легко ли это можно реализовать в моем случае. Они говорят о взломах (у меня сразу же возникают опасения IE7).
MRG
Является ли использование Google Fusion Tables обязательным в этом примере? Я не использую это в данный момент. Я скачаю код GitHub и проверю требования.
mrg
2
Все сводится к созданию полигона в KML с externalBoundarys, являющимся миром, и innerBoundary, являющимся вашей сферой интересов. Помимо трудностей с оформлением прозрачности, я продолжаю получать дыры в моем полупрозрачном слое при увеличении масштаба. У кого-нибудь есть опыт с этим?
mrg
1
KML довольно медленно загружаются, поэтому их постоянная замена может дать очень ленивый эффект. Кроме того, не пришлось бы мне постоянно менять имя, чтобы убедиться, что старый kml не кэшируется? У меня такое чувство, что мне нужны знания Google Fusion Tables.
mrg
1
Есть ли более простая реализация, которая может использовать файл KML вместо FusionTables? Мне нужно только выделить цветом 1 непрерывную область (границы города) и выделить серым цветом все остальное. Я посмотрел код Василе, но он действительно сложный и, похоже, зависит от взлома браузера. Кроме того, если это решение может использовать предложение elrobis сделать окно карты основой для эффекта серого, я думаю, что оно будет намного более стабильным / быстрым. {нарисовать границу вокруг города и закрасить его} // сделано {затенять все за исключением области внутри границы} ???????????????
user1845528
3

если инструмент, опубликованный @radek, не помог вам, есть еще один, который использует простые функции google.maps.Polygon: http://maps.vasile.ch/geomask/

По сути, он следует алгоритму числа обмоток: многоугольник маски (вселенной) оцифровывается по часовой стрелке, а все внутренние многоугольники оцифровываются против часовой стрелки http://en.wikipedia.org/wiki/Winding_number

Василе Котовану
источник