基于CSS和JavaScript創(chuàng)建動畫式谷歌地圖標記
譯文一、 簡介
谷歌地圖API允許web開發(fā)人員僅僅使用幾行代碼就可以通過其神奇的內(nèi)置功能創(chuàng)建卓越的用戶體驗。然而，它也存在一個明顯的不足——在映射標記方面缺乏靈活性和創(chuàng)造性。
當然，你可以添加自定義標記圖像、工具提示和相應的標簽，但所有這些都是靜態(tài)的、以面向文本的方式進行交互。此外，并不存在某種標準的方法來創(chuàng)建響應用戶操作的交互式標記。
我簡直不滿足于此，所以著手尋找一種創(chuàng)建真正獨特的映射方法。
本文正是想向你展示這種真正獨特的標記映射方法。具體地說，我要向各位展示如何使用CSS3動畫技術(shù)來標記地圖。基于此技術(shù)，你可以讓標記跳舞、扭動和隱藏，直至其能夠以優(yōu)雅的方式跳出熒屏。
如果用戶懸停在標記上，單擊它或在地圖外使用切換，你將能夠使用任何CSS動畫使其“復活”。本文將向你介紹一種簡單的策略，你可以在你的任何項目中使用這種動畫標記。作為你的比較參考，另外兩個例子——Ryan Connolly（http://jsfiddle.net/ryanoc/86Ejf/）和Felipe Figueroa（http://bl.ocks.org/amenadiel/f4e5bd78b214ff081254）都使用了類似于此的方法。
二、基礎(chǔ)知識
你僅需要使用下面介紹的幾個步驟即可為你地圖上的標記添加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)
- }
(二) 第二步
在標記聲明中把參數(shù)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
- });
(三) 第三步
創(chuàng)建一個overlayView對象，它負責把所有標記組織到一個面板中，然后你可以從DOM中訪問這個overlayView對象。請參考下面的代碼：
- var myoverlay = new google.maps.OverlayView();
- myoverlay.draw = function () {
- this.getPanes().markerLayer.id='markerLayer';
- };
- myoverlay.setMap(map);
在上面代碼調(diào)用getPanes()函數(shù)一行中，我們給標記層指定了一個id，這樣就可以在CSS中使用它。這個overlayView對象將自動收集不在另一個圖層中的任何標記。當然，在本例中，并沒有提供其他層，因此此對象收集的是所有標記。
(四) 第四步
現(xiàn)在，我們使用CSS技術(shù)來實現(xiàn)把當前層中的所有標記添加動畫效果。這種動畫效果可以是只發(fā)生一次的，也可以是繼續(xù)不斷地發(fā)生的。請參考下面代碼：
- #markerLayer img {
- animation: pulse .5s infinite alternate;
- -webkit-animation: pulse .5s infinite alternate;
- transform-origin: center;
- -webkit-transform-origin: center;
- }
三、更加靈活的設置
使用上面的步驟會讓你立即將動畫添加到所有標記上。在本節(jié)中，我們再來學習另外幾個選項來更好地控制動畫標記。
(一) 外部切換
比如說，你想要包括一個圖例或一些可點擊的切換按鈕，以便用戶可以顯示和隱藏不同的圖層，或想使標記具有某種特征從而更改其相應的CSS動畫。所有這些想法都是很容易實現(xiàn)的！你只需使用一個jQuery.click()處理器函數(shù)即可，請參考如下代碼片斷：
- $('.btn').click(function(){
- $('#markerLayer img').css('animation', 'myAnimationOptionsHere');
- $('#markerLayer img').css('-webkit-animation', 'myAnimationOptionsHere')
- })
(二)創(chuàng)建click/hover事件
當用戶將鼠標懸停在一個標記或單擊它時想要添加一個簡短的動畫嗎？那也不難。首先，創(chuàng)建一個全局數(shù)組來存儲所有的標記：
- var allMarkers=[];
然后，當你聲明每一個標記時，添加一個title屬性并把它轉(zhuǎn)換為字符串類型：
- var marker = new google.maps.Marker({
- position:latLng,
- map: map,
- icon: catIcon,
- optimized: false,
- title: allMarkers.length.toString()
- });
接下來，添加一個依賴于數(shù)組長度的title屬性，從而為每一個標記創(chuàng)建一個獨一無二的id。最后，使用如下代碼把標記添加到數(shù)組中：
- allMarkers.push(marker);
最后，我們來看一下click和hover事件的實現(xiàn)代碼。注意：我們通過使用單個標題標識符來標識每個標記：
- 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()...
- })
(三) 針對不同標記使用不同動畫效果
我們不妨考慮把兩個單獨的標記類型添加到一張地圖中的情形：棒球場地和足球場地。因為兩者都自動包括在你創(chuàng)建的覆蓋層，你需要通過某種方法實現(xiàn)把獨立的動畫效果應用于不同的標記。這是很容易做到的！只需要在你的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;
- }
四、小結(jié)
作為一名開發(fā)人員或設計師，你的主要工作是開發(fā)出您的用戶喜歡的產(chǎn)品。事實上，他們已經(jīng)在正使用的產(chǎn)品中見過很多的谷歌地圖應用?，F(xiàn)在，由你來滿足他們的更熱切的期望吧！
最后，提供幾種使用地圖標記動畫來滿足您的用戶需求的途徑：
- 如果你擁有模擬實際事物（如貓）的標記圖像，那么，你可以使用一個對應的CSS動畫來模擬自然的運動。
- 如果你的地圖標記圖像并非實際移動的物體（例如柜臺），那么你可以使用CSS動畫效果來模仿當點擊它們時這些圖像表現(xiàn)得很興奮，例如跳躍或者打顫的動畫效果。
- 如果你擁有對應于每個標記的數(shù)據(jù)，那么你可以使標記相應于這些數(shù)據(jù)作出反應。例如，你可以標記出交通繁忙的十字路口：你可以把一個閃爍的感嘆號放在這些地方。
試試看吧，努力堅持下去，你的用戶群肯定會紛至沓來！
原文標題：Creating Animated Google Map Markers with CSS and JavaScript
【51CTO譯稿，合作站點轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】
