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