我想實現像那樣的地圖使用谷歌地圖上面的圖像。我通過在StyledMapType對象中將飽和度設置爲-100來製作地圖灰度,並使用Circle對象在標記周圍繪製半徑。現在整個地圖是灰色的,因爲我無法在圓圈內設置另一個飽和度。有什麼辦法可以做到這一點?
回答
據我所知,沒有辦法直接在API中完成此操作。我必須在過去取得類似的效果,而且我的方式是創建一個「甜甜圈」而不是一個圓圈。
實際上,這個想法是創建一個排除其中心的圓形區域的大形狀。通過這種方式,您可以將多邊形上的不透明度設置得相當低,以突出顯示在此情況下「中心圓」的「感興趣區域」。
這也許是一個很好的起點:http://www.geocodezip.com/v3_polygon_example_donut.html
雖然明明在你的情況下,你會想改變顏色。另外請注意,尺寸是固定的,所以除非你限制地圖邊界,否則用戶將能夠縮小足夠遠以觀察邊緣(從而破壞幻覺),並且多邊形向極點扭曲(討厭的球形地球)。
希望這會有所幫助。
另一個想法是創建第二個地圖,通過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
如果您需要創建多個地圖這樣,你需要做更多的工作,使他們堅持到必要點
爲了公平起見,我認爲這會有一些性能損失,但它的工作非常順利,似乎是完全需要的解決方案。 儘管如此,請注意地圖瓦片的使用限制,但此解決方案會以兩倍的速度進行。 – Swires 2013-05-15 15:05:40
- 1. 谷歌地圖API v3定製infowindow框?
- 2. 谷歌地圖api v3背景色
- 3. 谷歌地圖API V3不同的顏色標記W/CoffeeScript的
- 4. OVER_QUERY_LIMIT谷歌地圖api v3
- 5. GWT +谷歌地圖API V3
- 6. overlayMouseTarget谷歌地圖api v3
- 7. 谷歌地圖JavaScript API v3
- 8. 谷歌地圖API V3 2.0.6
- 9. 谷歌地圖API V3 Over_Query_Limit
- 10. 谷歌地圖API V3在地圖
- 11. 谷歌地圖API V3打印地圖
- 12. 使用谷歌地圖api繪製多個多段線不同顏色V3 ASP.net
- 13. 定製谷歌地圖API
- 14. 顏色谷歌地圖
- 15. 演示顯示多個谷歌地圖(谷歌地圖API v3)
- 16. 谷歌地圖API v3配額圖
- 17. 谷歌地圖:在地圖上觸及谷歌查詢限制javascript v3 api
- 18. 谷歌地圖api
- 19. 定製和原來的標記顯示谷歌地圖API V3
- 20. 谷歌地圖API V3控制顯示身後地圖
- 21. 改變顏色的谷歌地圖V3的多折線行程
- 22. 我如何更改谷歌地圖的海洋顏色v3
- 23. 谷歌地圖V3 - Muliple標籤 - 不同的顏色
- 24. 如何把谷歌地圖v3的fancybox谷歌地圖v3
- 25. snap polyline to road - 谷歌地圖API v3
- 26. 如何使用谷歌地圖API V3
- 27. 谷歌地圖API V3渡輪檢測
- 28. 谷歌地圖api v3問題
- 29. 谷歌地圖api v2到v3
- 30. 谷歌地圖JavaScript V3 Api的標記
我不相信有什麼直接的方法可以完成這與地圖API。您可能需要查看http://googlemapsmania.blogspot.com/2011/10/create-cool-mask-effect-on-google-maps.html覆蓋地圖上的遮罩。 – 2013-03-21 13:17:10