Question

使用Google Maps API（版本3），您可以使用自定义图片在地图上添加标记对象。我正在使用它将我的照片的缩略图放在交互式地图上。我可以使用PHP脚本扩展自己的照片，因此可以通过URL以合适的大小显示它们。但Maps API不支持在元素上添加CSS阴影。实际上它不支持任何CSS，因为它只在canvas元素中呈现它的内容。

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

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

哪个最容易？有人可以为他们中的任何人提供解决方案吗？现在，两者似乎都过于复杂。

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

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

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

就个人而言，我将谷歌地图渲染成透明的png然后使用CSS来完全标记标记。

使用Google Maps API将CSS阴影添加到Marker

3 个答案: