当鼠标悬停时,如何使谷歌地图标记变得更大?

时间:2011-11-24 13:09:39

标签: google-maps animation google-maps-api-3 google-maps-markers

在谷歌地图API v3中,作为标题,我只在谷歌地图api中看到了两种类型的动画,但是我在某些地方看到地图标记的动画效果就像鼠标悬停在它上面一样大?怎么实现这个?

2 个答案:

答案 0 :(得分:2)

使用marker的鼠标悬停事件处理程序和setIcon()方法。您可以使用Google图表API中的dynamic icons来实现此目的,并更改chld属性以使图标增长:

enter image description here http://chart.googleapis.com/chart?chst=d_map_spin&chld=0.5|0|FF8800|15|_|

enter image description here http://chart.googleapis.com/chart?chst=d_map_spin&chld=0.6|0|FF8800|15|_|

enter image description here http://chart.googleapis.com/chart?chst=d_map_spin&chld=0.7|0|FF8800|15|_|

不要忘记设置合适的锚点!例如:

marker.setIcon(new google.maps.MarkerImage(
    'http://chart.googleapis.com/chart?chst=d_map_spin&chld=0.65|0|FF8800|15|_|',
    null,
    null,
    new google.maps.Point(11, 43) // this is the proper anchor point for scale 0.65
));

答案 1 :(得分:1)

您可以使用自己的图像作为标记,然后在scaledSize事件触发时使用标记图像的mouseover属性使其更大。

如果不做一些像这样的更复杂的事情,我不知道如何做到这一点。