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

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

Ответ 1

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

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

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

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" (масштабирование карт управления) для обеих карт

Здесь я настроил пример

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

Ответ 2

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

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

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

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

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