淡入淡出地圖/在谷歌地圖添加透明圖層v3

我想要做的是顯示一個簡單的谷歌地圖（基本，衛星和混合作爲選項），添加一個自定義標記，讓它居中一個特定的位置，並且..有整個地圖淡出一點，所以標記會更清晰。淡入淡出地圖/在谷歌地圖添加透明圖層v3

這最後一點被證明是一項相當困難的任務，因爲我需要以某種方式淡化地圖，但將標記和地圖控件保留在地圖頂部，因此拖動地圖，縮放和點擊標記的常規功能仍然可以工作。如果這是簡單的HTML，我會使用z-index值來控制它，但它看起來像使用畫布嵌入地圖塊內部的標記，所以我真的很想用谷歌API來做到這一點。

我已經花了整整一天的時間查看Q &這裏是關於stackoverflow，瀏覽谷歌API，並試圖找到一些簡單的方法來添加透明覆蓋在谷歌地圖上使用API v3。

到目前爲止，我能找到的最接近的是，使用KML創建自定義圖層，並將其顯示爲控件，但由於我實際上並未考慮KML的工作方式，因此這是非常先進的，並且我覺得我必須花費數週才能正常工作。

真的沒有簡單的方法來在谷歌地圖中創建這種透明效果嗎？

爲了簡單起見，我使用的是smashinglabs.com的gmap，但我可以輕鬆地將它切換爲更通用的Google Maps API調用。這是我目前使用的JavaScript代碼：

$("#bmap").gMap({ 
    latitude: 'fit', 
    longitude: 'fit', 
    zoom: 'fit', 
    maptype:google.maps.MapTypeId.HYBRID, 
    controls:[{pos:google.maps.ControlPosition.TOP_LEFT,div:$("#bmapoverlay")}], 
    markers: [extraMarker,{ latitude:XX,longitude:XX,html:'', 
    icon:{image:'*URL*',iconsize:[56,90],iconanchor:[28,90]}}] 
});

請注意，我已經刪除了經度/緯度號碼以及私隱:)

添加DIV着想的圖標網址bmapoverlay完全不起作用，我會考慮將它們一起移除。

smashinglabs gmap的文檔可以在here找到。

來源

2014-09-29 user3392015

的gamma或lightness造型應該爲你問什麼工作。這是而不是的透明效果，這意味着它不會允許看到任何會在地圖後面的元素，但它應該實現淡出效果您在問題中提到的效果。

查看documentation about stylers here。

用法示例：

var mapStyles = [{ 
    "stylers": [{ 
     "gamma": 6 
    }] 
}]; 

map.setOptions({ 
    styles: mapStyles 
});

JSFiddle demo

希望這有助於！

來源

2014-09-30 12:25:20 MrUpsidown

這幾乎就是我所需要的。我認爲我使用的gmap不支持setOptions，但我正在向開發人員詢問這一點。如果它不支持它，我想我會嘗試使用一般的Google API重新創建地圖，儘管這可能有點工作.. – user3392015 2014-10-01 13:07:35

您使用的是什麼版本？ – MrUpsidown 2014-10-01 13:23:13

在爲WAY搞亂了太久後，我終於找到了一個不使用gmap的地圖的實例，而是一般的google v3 API。通常情況下，這張地圖幾乎相同，儘管不是使用伽瑪，而是將飽和度設置爲-100，從而賦予黑白效果，很好地淡化了地圖。這個答案是最接近我找到的解決方案，我認爲這是這個問題的勝利者:) – user3392015 2014-10-01 14:00:04

有趣的問題。

我很抱歉，但沒有辦法在地圖上應用任何形式的不透明度，可以直觀地突出顯示您的標記。
使用KML是一個非常糟糕的選擇。使用KML一旦你理解了它，但它不會滿足你的情況。此外，它會讓你的地圖變慢。 KML文件 https://www.google.com/fusiontables/DataSource?docid=1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk#rows:id=1 和 https://www.google.com/fusiontables/data?docid=1zn8cjdD6qlAFI7ALMEnwn89g50weLi1D-bAGSZw#rows:id=1 示例代碼：您可以通過使用世界KML文件，然後使用下面的教程嘗試 https://developers.google.com/maps/documentation/javascript/examples/layer-kml
我認爲將是最適合你的問題是，你創造通過示例代碼簡單的谷歌地圖：現在你在地圖div上添加一個div，並設置你的不透明度/透明度。接下來您使用D3添加自定義標記。這裏是一個偉大的教程/示例代碼： http://bl.ocks.org/mbostock/899711

如果你不熟悉D3，不用擔心，代碼非常簡單。（如果您需要任何幫助瞭解D3的這些代碼，請詢問）。您將使用SVG創建標記。使用D3標記的好處是，即使您在地圖上放置了1000多個標記，它也不會影響任何表現。

那麼你也可以使用自定義風格的地圖。使用以下鏈接並檢查「明亮度」並對其進行修改。

問候， Suyash

來源

2014-09-29 13:41:00

這聽起來很有希望。我會檢查D3，看看它是否可以解決我的問題:) – user3392015 2014-09-29 14:14:45

我有點卡在D3文檔與我從smashinglabs gmap（自適應地圖和PNG標記）獲得的功能。畢竟，我認爲我可能放棄這個想法，儘管它看起來很有前途。 – user3392015 2014-10-01 13:04:53

淡入淡出地圖/在谷歌地圖添加透明圖層v3

回答

相關問題