基于CSS和JavaScript创建动画式谷歌地图标记_html/css_WEB-ITnose

一、 简介

谷歌地图API允许web开发人员仅仅使用几行代码就可以通过其神奇的内置功能创建卓越的用户体验。然而，它也存在一个明显的不足——在映射标记方面缺乏灵活性和创造性。

当然，你可以添加自定义标记图像、工具提示和相应的标签，但所有这些都是静态的、以面向文本的方式进行交互。此外，并不存在某种标准的方法来创建响应用户操作的交互式标记。

我简直不满足于此，所以着手寻找一种创建真正独特的映射方法。

本文正是想向你展示这种真正独特的标记映射方法。具体地说，我要向各位展示如何使用CSS3动画技术来标记地图。基于此技术，你可以让标记跳舞、扭动和隐藏，直至其能够以优雅的方式跳出荧屏。

如果用户悬停在标记上，单击它或在地图外使用切换，你将能够使用任何CSS动画使其“复活”。本文将向你介绍一种简单的策略，你可以在你的任何项目中使用这种动画标记。作为你的比较参考，另外两个例子——Ryan Connolly（http://jsfiddle.net/ryanoc/86Ejf/）和Felipe Figueroa（http://bl.ocks.org/amenadiel/f4e5bd78b214ff081254）都使用了类似于此的方法。

二、基础知识

你仅需要使用下面介绍的几个步骤即可为你地图上的标记添加CSS动画效果支持。

(一) 第一步

在你的标记上添加一幅图像。下面是你指定图像的代码方式：

var catIcon = {      url: myImageURLhere,      //state your size parameters in terms of pixels      size: new google.maps.Size(70, 60),      scaledSize: new google.maps.Size(70, 60),      origin: new google.maps.Point(0,0)  } 

(二) 第二步

在标记声明中把参数optimized设置为false。这可以让你把每一个标记渲染为一个独立的DOM元素：

var marker = new google.maps.Marker({      position:latLng,      map: map,      // set the icon as catIcon declared above      icon: catIcon,      // must use optimized false for CSS      optimized: false  }); 

(三) 第三步

创建一个overlayView对象，它负责把所有标记组织到一个面板中，然后你可以从DOM中访问这个overlayView对象。请参考下面的代码：

var myoverlay = new google.maps.OverlayView();      myoverlay.draw = function () {          this.getPanes().markerLayer.id='markerLayer';      };  myoverlay.setMap(map); 

在上面代码调用getPanes()函数一行中，我们给标记层指定了一个id，这样就可以在CSS中使用它。这个overlayView对象将自动收集不在另一个图层中的任何标记。当然，在本例中，并没有提供其他层，因此此对象收集的是所有标记。

(四) 第四步

现在，我们使用CSS技术来实现把当前层中的所有标记添加动画效果。这种动画效果可以是只发生一次的，也可以是继续不断地发生的。请参考下面代码：

#markerLayer img {    animation: pulse .5s infinite alternate;    -webkit-animation: pulse .5s infinite alternate;    transform-origin: center;    -webkit-transform-origin: center;  } 

三、更加灵活的设置

使用上面的步骤会让你立即将动画添加到所有标记上。在本节中，我们再来学习另外几个选项来更好地控制动画标记。

(一) 外部切换

比如说，你想要包括一个图例或一些可点击的切换按钮，以便用户可以显示和隐藏不同的图层，或想使标记具有某种特征从而更改其相应的CSS动画。所有这些想法都是很容易实现的！你只需使用一个jQuery.click()处理器函数即可，请参考如下代码片断：

$('.btn').click(function(){     $('#markerLayer img').css('animation', 'myAnimationOptionsHere');     $('#markerLayer img').css('-webkit-animation', 'myAnimationOptionsHere')  }) 

(二)创建click/hover事件

当用户将鼠标悬停在一个标记或单击它时想要添加一个简短的动画吗？那也不难。首先，创建一个全局数组来存储所有的标记：

var allMarkers=[];

然后，当你声明每一个标记时，添加一个title属性并把它转换为字符串类型：

var marker = new google.maps.Marker({      position:latLng,      map: map,      icon: catIcon,      optimized: false,      title: allMarkers.length.toString()  }); 

接下来，添加一个依赖于数组长度的title属性，从而为每一个标记创建一个独一无二的id。最后，使用如下代码把标记添加到数组中：

allMarkers.push(marker); 

最后，我们来看一下click和hover事件的实现代码。注意：我们通过使用单个标题标识符来标识每个标记：

google.maps.event.addListener(marker, 'click', function() {    var thisTitle= Number(this.title);    $('#markerLayer img').eq(thisTitle).css()...  })  google.maps.event.addListener(marker, 'mouseover/mouseout', function() {    var thisTitle= Number(this.title);    $('#markerLayer img').eq(thisTitle).css()...  }) 

(三) 针对不同标记使用不同动画效果

我们不妨考虑把两个单独的标记类型添加到一张地图中的情形：棒球场地和足球场地。因为两者都自动包括在你创建的覆盖层，你需要通过某种方法实现把独立的动画效果应用于不同的标记。这是很容易做到的！只需要在你的CSS中使用src属性并使用各自标记对应的图像URL来匹配就可以了。请参考下面代码：

#markerLayer img[src='/img/myURLpath'] {      animation: pulse .5s infinite alternate;      -webkit-animation: pulse .5s infinite alternate;      transform-origin: center;      -webkit-transform-origin: center;  } 

四、小结

作为一名开发人员或设计师，你的主要工作是开发出您的用户喜欢的产品。事实上，他们已经在正使用的产品中见过很多的谷歌地图应用。现在，由你来满足他们的更热切的期望吧！

最后，提供几种使用地图标记动画来满足您的用户需求的途径：

l 如果你拥有模拟实际事物（如猫）的标记图像，那么，你可以使用一个对应的CSS动画来模拟自然的运动。

l 如果你的地图标记图像并非实际移动的物体（例如柜台），那么你可以使用CSS动画效果来模仿当点击它们时这些图像表现得很兴奋，例如跳跃或者打颤的动画效果。

l 如果你拥有对应于每个标记的数据，那么你可以使标记相应于这些数据作出反应。例如，你可以标记出交通繁忙的十字路口：你可以把一个闪烁的感叹号放在这些地方。

试试看吧，努力坚持下去，你的用户群肯定会纷至沓来！

原文标题： Creating Animated Google Map Markers with CSS and JavaScript

【51CTO译稿，合作站点转载请注明原文译者和出处为51CTO.com】