1

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

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

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

  2. 或者以某种方式改变 Maps API 的使用来获得一个可以应用任何 CSS 效果的真实 DOM 元素。

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

4

3 回答 3

2

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

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

于 2013-03-22T19:10:59.287 回答
1

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

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

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

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

我个人让 Google Maps 渲染一个透明的 png，然后使用 CSS 来完全设置标记的样式。

于 2015-12-08T09:56:33.120 回答
0

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

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

于 2014-09-01T11:33:34.013 回答