Google Map API v3 Настройка цвета

Question

Я пытаюсь достичь карты, как на картинке, используя карту Google. Я сделал карту в оттенках серого, задав насыщенность -100 в объекте StyledMapType и нарисовал радиус вокруг маркера с помощью объекта Circle. Теперь вся карта - серый, так как я не могу установить другой уровень насыщения внутри круга. Есть ли способ достичь этого?

Answer 1

Насколько я знаю, нет возможности выполнить это непосредственно в API. Мне приходилось добиваться аналогичного эффекта в прошлом и то, как я это делал, было создание «пончика», а не круга.

Эффективно идея состоит в том, чтобы создать большую фигуру, исключающую круговую область в центре. Таким образом, вы можете установить непрозрачность на многоугольнике достаточно низко, чтобы выделить «область интересов» в этом случае центрального круга.

Это, возможно, является хорошей отправной точкой: http://www.geocodezip.com/v3_polygon_example_donut.html

Хотя, очевидно, в вашем случае ваш будет хотеть изменить цвета. Также имейте в виду, что размер исправлен, поэтому, если вы не ограничите границы карт, пользователи смогут значительно уменьшить масштаб, чтобы увидеть края (таким образом, разрушая иллюзию), а полигоны искажаются по полюсам (досадная сферическая земля).

Надеюсь, это поможет.

Answer 2

Другой идеей является создание второй карты, ее стиль по-другому через StyledMapType, сделать ее абсолютно позиционированной и поставить перед первой графикой, сделанной в сером виде.

Вы можете сделать это оглядеться, используя -webkit-маску, как описано here

Вы также должны синхронизировать события между картами, так что они совпадают, то есть по центру к одной и той же позиции и всегда имеют одинаковый уровень масштабирования. Вы должны также создать какой-блокатор, чтобы избежать рекурсивных вызовов

var block = false; 
google.maps.event.addListener (thismap, 'center_changed', function(event) { 
    if (block) return; 
    block = true; 
    othermap.setCenter(thisMap.getCenter()); 
    block=false; 
}); 

То же самое должно быть сделано для «center_changed» (для управления картами центровки) и «zoom_changed» (карты контроля масштаба), для обеих карт

Здесь я настроить example

Если вам нужно будет создать более одной карты таким образом, вам нужно сделать больше работы, чтобы сделать их придерживаться необходимых точек