使用Google Maps API向标记添加CSS阴影

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

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

编写一个PHP脚本，可以生成这样的阴影图像。它们需要是具有alpha透明度的PNG图像。不确定PHP是否支持这一点。我可以使用一个模板，将其角点和边缘复制到所需大小的目标图像上，或者我可以自己计算高斯模糊，生成每个像素，这可能需要更长的时间

或者以某种方式改变mapsapi的用法，以获得一个真正的DOM元素，我可以对其应用任何CSS效果

---

哪一个最容易？有人能为他们中的任何一个提供解决方案吗？现在，这两种方法似乎都过于复杂了。

一种选择是在标记上使用。标记不会在画布中呈现，但您必须决定应用程序的性能是否可以接受

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

---

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

正如@geocodezip指出的，您应该使用

optimized:false

作为标记选项，让Google Maps将其呈现为HTML，而不是使用Canvas

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

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

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

---

就我个人而言，我让Google Maps呈现一个透明的png，然后使用CSS来完全设置标记的样式。

好的一点，我现在看到单个DOM元素带有optimized:false。但是我如何用JavaScript或更好的CSS来解决这些问题呢？他们似乎没有特殊的CSS类。