Google Map API v3 Kolor Dostosowanie

Question

próbuję osiągnąć taką mapę powyższym obrazie przy użyciu Google Map. Zrobiłem mapę w skali szarości, nadając nasycenie -100 w obiekcie StyledMapType i narysowałem promień wokół znacznika za pomocą obiektu Okrąg. Teraz cała mapa jest szarości, ponieważ nie mogę ustawić innego poziomu nasycenia wewnątrz okręgu. Czy jest jakiś sposób, aby to osiągnąć?

Answer 1

O ile mi wiadomo, nie można tego zrobić bezpośrednio w interfejsie API. Musiałem osiągnąć podobny efekt w przeszłości i sposób, w jaki to zrobiłem, polegał na stworzeniu "pączka" zamiast koła.

Skutecznie chodzi o to, aby stworzyć duży kształt, który nie obejmuje okrągłego obszaru w jego środku. W ten sposób możesz ustawić krycie na wielokącie dość nisko, aby podświetlić "obszar zainteresowania", w tym przypadku koło centralne.

Być może jest to dobry punkt wyjścia: http://www.geocodezip.com/v3_polygon_example_donut.html

Choć oczywiście w przypadku, gdy będzie chciał zmienić barwy. Pamiętaj też, że rozmiar jest ustalony, więc jeśli nie ograniczysz granic mapy, użytkownicy będą mogli oddalić obraz na tyle, aby zobaczyć krawędzie (w ten sposób rujnując iluzję), a wielokąty zniekształcą się w kierunku biegunów (nieokreślona kulista ziemia).

Mam nadzieję, że to pomoże.

Answer 2

Innym pomysłem jest stworzenie drugiej mapy, stylizowanie jej w inny sposób za pomocą StyledMapType, ustawianie jej w absolutnej pozycji i umieszczanie jej przed pierwszą skalą z wygładzaniem.

Można zrobić to wyglądać runda używa -webkit maskę jak opisano here

Należy również synchronizować wydarzenia między mapami, dzięki czemu będą one zbieżne, to skupia się na tej samej pozycji i zawsze mają ten sam poziom powiększenia. Trzeba także stworzyć jakiś bloker, aby uniknąć wywołania rekurencyjne

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

To samo należy zrobić dla „center_changed” (kontrolowanie mapy centrujące) oraz „zoom_changed” (mapy sterowania zoom), na obu mapach

Tu wcześniej skonfigurować example

Jeśli trzeba będzie utworzyć więcej niż jedną mapę w ten sposób, trzeba zrobić więcej pracy, aby je trzymać się niezbędne punkty