首页 > 微信营销 > 微信开发 > 基于CSS和JavaScript创建动画式谷歌地图标记

基于CSS和JavaScript创建动画式谷歌地图标记

2018-07-17 12:02:56 200万次浏览

一、简介

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

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

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

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

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

二、基础知识

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

(一)第一步

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

varcatIcon={url:myImageURLhere,//stateyoursizeparametersintermsofpixels size:newgoogle.maps.Size(70,60),scaledSize:newgoogle.maps.Size(70,60),origin:newgoogle.maps.Point(0,0)}