Google地图标记的效果和动画

时间:2012-01-04 02:27:54

标签: html5 google-maps animation google-maps-api-3 html5-canvas

我想知道如何通过Google地图标记创建效果/动画。具体来说,我想在给定的时间后放大/缩小或“淡化”标记。 HTML5可以实现吗?这样做是否有任何jquery效果库?

(我可以使用地图图块服务器来创建地图图块叠加层,然后每秒重新生成图块叠加层,但我想这是非常耗费处理的...)

提前致谢

2 个答案:

答案 0 :(得分:4)

我没有看到任何库来执行此操作,并且API中没有用于淡化标记的功能。

相反,你可以做的是通过创建一个看起来像标记的Custom Overlay来模拟标记。自定义叠加层通常包含一个div,您可以根据自定义叠加构造期间指定的类或ID轻松控制使用JavaScript / jQuery的不透明度。

例如,如果您查看this页面,可以看到用于切换可见性的按钮,您可以轻松更改JavaScript以控制某些内容的不透明度。

答案 1 :(得分:2)

我正在做类似的事情。 如果为所有标记设置标记选项'optimized:false',则每个标记都有自己的元素,然后您可以使用jQuery选择地图上所有标记,使用$('#map_canvas img [src *] =“filename”]'),假设您使用自定义图像作为标记。

这没有解决的问题是将返回到特定标记的数组中的每个元素相关联。 我认为您可以一次一个地将标记添加到地图中,重新运行jquery选择器,并比较返回的元素与上一次运行,以查看哪个元素是新的。我没有测试过这部分(我在第一段中有我说的话),因为我正在努力寻找稍微不同的东西。

然后,您应该可以直接调整图像的不透明度/大小。 对于大量的标记,这可能会变得很笨拙。


上面的第二段是愚蠢的。

向地图添加标记,确保设置optimized:false选项。然后

var freshlyAddedMarkerImage = $('#map_canvas img[src*="your_marker_icon"][class!="adjustMe"]');

新添加的标记不具有该类,因此将是唯一选择的元素。在设置className之前,您可以设置一个ID,将元素添加到与相应标记对象保存在另一个数组中相同索引位置的数组中,等等。

这应该比我之前提出的要少得多。我会尽快回来找一个有效的例子。

我想如果你知道有一组标记可以共享相同的变换(缩放/淡入淡出),由于年龄相同或者其他什么,那么你可以添加所有这些标记,只做jQuery选择结束,在循环返回的元素之前设置一个允许你集体调整它们的类。