【问题标题】:Effects and animations with Google Maps markers带有谷歌地图标记的效果和动画
【发布时间】:2012-02-02 00:39:36
【问题描述】:
我想知道如何在 Google 地图标记上创建效果/动画。具体来说,我想在给定的时间后放大/缩小或“淡化”标记。 HTML5 有可能吗?是否有任何 jquery 效果库可以做到这一点?
(我可以使用地图瓦片服务器来创建地图瓦片叠加层并每秒重新生成瓦片叠加层,但我想它的处理量很大......)
提前致谢
【问题讨论】:
标签:
html
google-maps
animation
google-maps-api-3
html5-canvas
【解决方案1】:
我正在考虑做类似的事情。
如果为所有标记设置标记选项“优化:false”,每个标记都有自己的元素,然后您可以使用 jQuery 使用 $('#map_canvas img[src* ="filename"]'),假设您使用自定义图像作为标记。
这里没有解决的是将返回的数组中的每个元素与特定标记相关联。
我认为您可以一次将标记添加到地图中,重新运行 jquery 选择器,并将返回的元素与上一次运行进行比较,以查看哪个元素是新的。我还没有测试这部分(我在第一段中说过的话),因为我正在努力做一些稍微不同的事情。
然后您应该能够直接调整图像的不透明度/大小。
对于大量标记,这可能会变得很笨重。
上面的第二段是愚蠢的。
在地图上添加一个标记,确保设置了 optimization:false 选项。那么
var freshlyAddedMarkerImage = $('#map_canvas img[src*="your_marker_icon"][class!="adjustMe"]');
新添加的标记将没有类,因此将是唯一选择的元素。在设置 className 之前,您可以设置一个 ID,将元素添加到与对应的标记对象保存在另一个数组中的索引位置相同的数组中,等等。
这应该比我之前建议的实施起来要简单得多。我会尽快尝试并提供一个可行的示例。
我想如果你知道有一组标记会共享相同的变换(缩放/淡入淡出),由于年龄相同或其他原因,那么你可以添加所有标记,并且只在最后,在循环遍历返回的元素之前设置一个允许您整体调整它们的类。
【解决方案2】:
我还没有看到任何库可以做到这一点,并且 API 中没有按说淡化标记的功能。
相反,您可以通过创建自己的Custom Overlay 来模拟标记,该Custom Overlay 看起来像一个标记。自定义叠加层通常包含一个 div,您可以根据您在自定义叠加层构建过程中分配的类或 id 轻松控制使用 JavaScript / jQuery 的不透明度。
例如,如果您查看this 页面,您会看到这是一个用于切换可见性的按钮,您可以轻松更改该 JavaScript 来控制某些内容的不透明度。