使用 Google Maps API 将 CSS 阴影添加到标记答案

【问题标题】：Add CSS shadow to a Marker with Google Maps API使用 Google Maps API 将 CSS 阴影添加到标记
【发布时间】：2013-03-12 18:13:14
【问题描述】：

使用 Google Maps API（第 3 版），您可以使用自定义图像在地图上添加标记对象。我正在使用它在交互式地图上放置我的照片的缩略图。我可以使用 PHP 脚本缩放我自己的照片，因此它们可以通过 URL 以合适的尺寸提供。但 Maps API 不支持在元素上添加 CSS 阴影。事实上，它不支持任何 CSS，因为它只在画布元素中呈现其内容。

现在我想我有两个选项可以在缩略图下获得阴影：

编写一个可以生成此类阴影图像的 PHP 脚本。它们需要是具有 alpha 透明度的 PNG 图像。不确定PHP是否支持这一点。我可以使用模板并将其角和边缘复制到所需大小的目标图像，或者我可以自己计算高斯模糊并生成每个像素，这可能需要更长的时间。
或者以某种方式改变 Maps API 的使用来获得一个真正的 DOM 元素，我可以在其上应用任何 CSS 效果。

哪个最简单？有人可以为其中任何一个提供解决方案吗？现在，两者似乎都过于复杂了。

【问题讨论】：

标签： css google-maps-api-3 google-maps-markers shadow

【解决方案1】：

一种选择是在标记上使用optimized:false markerOption。标记不会在 CANVAS 中呈现，但您必须确定性能是否适合您的应用程序。

优化 |布尔值 |优化将许多标记呈现为单个静态元素。默认情况下启用优化渲染。禁用动画 GIF 或 PNG 的优化呈现，或者当每个标记必须呈现为单独的 DOM 元素时（仅限高级用法）。

【讨论】：

好点，我现在看到单个 DOM 元素优化：false。但是我怎样才能用 JavaScript 或更好的 CSS 来解决它们呢？它们似乎没有特殊的 CSS 类。

【解决方案2】：

正如@geocodezip 指出的那样，您应该使用optimized : false 作为markerOption 来让Google 地图将它们呈现为HTML，而不是使用Canvas。

要解决 LonelyPixels 关于如何设置样式的问题，您可以这样做：

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

您可以为不同的图像指定不同的样式，然后每当谷歌地图使用该图像作为标记（您可以在其他地方设置此图像）时，您都可以更改其样式。

我个人让谷歌地图呈现一个透明的 png，然后使用 CSS 来完全设置标记的样式。

【讨论】：

【解决方案3】：

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

注意：标记阴影已在 Google Maps JavaScript API 3.14 版中移除。任何以编程方式指定的阴影都将被忽略。

【讨论】：