1.简介GoogleMapsAPI允许Web开发人员通过其神奇的内置功能仅使用几行代码即可创建出色的用户体验。然而，它也有一个明显的缺点——在映射标记方面缺乏灵活性和创造性。当然，您可以添加自定义标记图像、工具提示和相应的标签，但所有这些都是静态的，并且以面向文本的方式进行交互。此外，没有标准的方法来创建响应用户操作的交互式标记。我就是受够了，所以开始寻找一种方法来创建真正独特的地图。本文旨在向您展示这种真正独特的标记映射方法。具体来说，我将向您展示如何使用CSS3动画技术来标记地图。基于这项技术，您可以让标记跳舞、扭曲和隐藏，直到它优雅地弹出屏幕。如果用户将鼠标悬停在标记上、单击它或在地图外使用切换按钮，您将能够使用任何CSS动画使其“栩栩如生”。本文将向您介绍一个简单的策略，您可以通过该策略在您的任何项目中使用这个动画标记。作为您的比较参考，另外两个示例-RyanConnolly(http://jsfiddle.net/ryanoc/86Ejf/)和FelipeFigueroa(http://bl.ocks.org/amenadiel/f4e5bd78b214ff081254)都使用类似此处的方法.2.基础知识您只需要使用以下步骤为地图上的标记添加CSS动画支持。(1)第一步是在标记顶部添加图像。以下是您在代码中指定图像的方式：varcatIcon={url:myImageURLhere,//stateyoursizeparametersintermsofpixelssize:newgoogle.maps.Size(70,60),scaledSize:newgoogle.maps.Size(70,60),origin:newgoogle.maps。Point(0,0)}(2)第二步，在标签声明中将参数optimized设置为false。这允许您将每个标记呈现为单独的DOM元素：varmarker=newgoogle.maps.Marker({position:latLng,map:map,//settheiconascatIcondeclaredaboveicon:catIcon,//mustuseoptimizedfalseforCSSoptimized:false});(3)第三步，创建一个overlayView对象，它负责将所有的标签组织成一个panel，然后就可以从DOM中访问到这个overlayView对象。请参考以下代码：varmyoverlay=newgoogle.maps.OverlayView();myoverlay.draw=function(){this.getPanes().markerLayer.id='markerLayer';};myoverlay.setMap(map);在上面的代码在调用getPanes()函数的行中，我们为标记层分配了一个id，以便它可以在CSS中使用。此overlayView对象将自动收集不在另一层中的任何标记。当然，在这种情况下，没有提供其他层，所以这个对象收集了所有的标记。(4)第四步现在，我们利用CSS技术为当前层的所有标签添加动画效果。这个动画效果可以只出现一次，也可以持续连续出现。请参考以下代码：#markerLayerimg{animation:pulse.5sinfinitealternate;-webkit-animation:pulse.5sinfinitealternate;transform-origin:center;-webkit-transform-origin:center;}3.更灵活的设置使用以上步骤将让您立即为所有标记添加动画。在本节中，我们将查看更多选项以更好地控制动画标记。(1)外部切换例如，你想包含一个图例或一些可点击的切换按钮，以便用户可以显示和隐藏不同的图层，或者你想让标记具有某些特性来改变其相应的CSS动画。所有这些想法都很容易实现！您只需要使用一个jQuery.click()处理函数，请参考以下代码片段：$('.btn').click(function(){$('#markerLayerimg').css('animation','myAnimationOptionsHere');$('#markerLayerimg').css('-webkit-animation','myAnimationOptionsHere')})(2)当用户悬停在标记上或点击它时创建点击/悬停事件要添加短动画？那也不难。首先，创建一个全局数组来存储所有标记：varallMarkers=[];然后，当您声明每个标记时，添加一个title属性并将其转换为字符串类型：varmarker=newgoogle.maps.Marker({position:latLng,map:map,icon:catIcon,optimized:false,title:allMarkers.length.toString()});接下来，添加一个取决于数组长度的title属性，为每个标记创建一个唯一的id。最后，使用以下代码向数组添加标记：allMarkers.push(marker)；最后我们来看一下点击和悬停事件的实现代码。注意：我们通过使用单个标题标识符来识别每个标记：google.maps.event.addListener(marker,'click',function(){varthisTitle=Number(this.title);$('#markerLayerimg').eq(thisTitle).css()...})google.maps.event.addListener(marker,'mouseover/mouseout',function(){varthisTitle=Number(this.title);$('#markerLayerimg').eq(thisTitle).css()...})(3)对不同的标记使用不同的动画效果让我们考虑向地图添加两种不同的标记类型：棒球场和足球场。由于两者都自动包含在您创建的叠加层中，因此您需要某种方式将独立的动画效果应用于不同的标记。这很容易做到！只需在您的CSS中使用src属性并将其与相应标签对应的图像URL相匹配。请参考以下代码：#markerLayerimg[src='/img/myURLpath']{animation:pulse.5sinfinitealternate;-webkit-animation:pulse.5sinfinitealternate;transform-origin:center;-webkit-transform-origin:center;}4、总结作为开发人员或设计师，您的主要工作是开发用户喜爱的产品。事实上，他们已经在自己使用的产品中看到了很多谷歌地图的应用。现在，要靠你来满足他们更殷切的期望了！最后，这里有几种使用地图标记动画来满足您的用户需求的方法：如果您有模拟真实事物（如猫）的标记图像，那么您可以使用相应的CSS动画来模拟自然运动。如果您的地图标记图片实际上不是移动的物体（例如计数器），那么您可以使用CSS动画效果来模拟这些图片在被点击时表现出的动画效果，例如跳跃或晃动动画。如果您拥有与每个标记对应的数据，那么您可以让标记对该数据做出反应。例如，您可以标记交通繁忙的路口：您可以在这些地方放置一个闪烁的感叹号。尝试一下，坚持下去，您的用户群一定会跟进！原标题：使用CSS和JavaScript创建动画Google地图标记
