css - 使用 Google Maps API 将 CSS 阴影添加到标记

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

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

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

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

  2. 或者以某种方式更改 Maps API 的用法以获得我可以对其应用任何 CSS 效果的真实 DOM 元素。

哪个最简单?有人可以为他们中的任何一个提供解决方案吗?现在,两者似乎同样过于复杂。

最佳答案

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

optimized | boolean | Optimization renders many markers as a single static element. Optimized rendering is enabled by default. Disable optimized rendering for animated GIFs or PNGs, or when each marker must be rendered as a separate DOM element (advanced usage only).

关于css - 使用 Google Maps API 将 CSS 阴影添加到标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15577958/

相关文章:

javascript - 将图像制作为按钮且不可下载

javascript - 如何使用 jquery 找到内联 margin-left 的值

javascript - 集群上的谷歌地图信息窗口

javascript - 在html中创建6个复选框

javascript - 获取谷歌地图中点击标记的完整地址

javascript - 在 Google Maps API V3 中仅显示一个 InfoBubble

javascript - $getScript 加载 google maps api 的方法 -> 空白页面?

java - 在 android studio 中使用 LatLng 的问题

android - 如何在android中获得ClusterManager点击和ClusterManager项目点击

css - CSS中DIV宽度 float 问题