谷歌地圖API V3顏色定製

Question

我想實現像那樣的地圖使用谷歌地圖上面的圖像。我通過在StyledMapType對象中將飽和度設置爲-100來製作地圖灰度，並使用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

如果您需要創建多個地圖這樣，你需要做更多的工作，使他們堅持到必要點