使用Google Maps API將CSS陰影添加到標記器

使用Google Maps API（版本3），您可以使用自定義圖像在地圖上添加標記對象。我正在使用它將我的照片的縮略圖放置在交互式地圖上。我可以使用PHP腳本調整自己的照片，以便通過URL以適當的大小顯示它們。但是Maps API不支持在元素上添加CSS陰影。實際上，它不支持任何CSS，因爲它僅在canvas元素中呈現其內容。使用Google Maps API將CSS陰影添加到標記器

現在，我想我有兩個選擇，讓在我的縮略圖陰影：

寫一個PHP腳本，它可以產生這樣的陰影圖像。他們需要成爲具有alpha透明度的PNG圖像。不確定這是否被PHP支持。我可以使用一個模板並將其邊角和邊緣複製到所需大小的目標圖像，或者我可以自己計算高斯模糊，並生成每個可能需要更長時間的單個像素。
或者以某種方式更改Maps API的用法以獲取可應用任何CSS效果的真實DOM元素。

哪個最簡單？有人可以爲他們提供解決方案嗎？現在，兩者似乎都過於複雜。

來源

2013-03-22 ygoe

一種選擇是在標記上使用optimized:false markerOption。這些標記不會在CANVAS中呈現，但您必須決定該應用程序的性能是否可接受。

優化|布爾|優化將許多標記呈現爲單個靜態元素。默認情況下已啓用優化的渲染。禁用動畫GIF或PNG的優化渲染，或者每個標記必須呈現爲單獨的DOM元素（僅限高級用法）。

來源

2013-03-22 19:10:59 geocodezip

好點，我現在看到單個DOM元素進行了優化：false。但是，我怎樣才能用JavaScript或更好的CSS來解決它們呢？他們似乎沒有特殊的CSS類。 – ygoe 2013-03-22 19:43:44

https://developers.google.com/maps/documentation/javascript/markers

注：標記陰影在谷歌地圖的JavaScript API的版本3.14被拆除。任何以編程方式指定的陰影都將被忽略。

來源

2014-09-01 11:33:34

正如@geocodezip指出的那樣，您應該使用optimized : false作爲markerOption讓Google Maps將它們渲染爲HTML，而不是使用Canvas。

爲了解決LonelyPixels問題，即如何將他們的風格，你可以這樣做是這樣的：

img[src="/content/maps/spotlight-poi-red.png"] { 
    background: red; 
}

您可以指定不同的圖像不同的風格，那麼只要谷歌地圖使用該圖片的標記（你可以在其他地方設置此圖像），您可以改變其風格。

就我個人而言，我會讓Google地圖渲染一個透明png，然後使用CSS來完成樣式標記。

來源

2015-12-08 09:56:33 Chris

使用Google Maps API將CSS陰影添加到標記器

回答

相關問題