您可以通過動畫的方式呈現(xiàn)標(biāo)記,以便它們能夠在各種不同的情況下展現(xiàn)出動態(tài)移動的效果。要指定某個標(biāo)記的
動畫呈現(xiàn)方式,請使用該標(biāo)記的 animation
屬性,其類型為 google.maps.Animation
。可支持以
下 Animation
值:
DROP
表示第一次將該標(biāo)記放置在地圖上時,該標(biāo)記應(yīng)該從地圖頂部下落到其最終位置。一旦標(biāo)記停止移
動,動畫即停止,并且
animation
將還原為null
。在創(chuàng)建Marker
時,通常會指定這種類型的動畫。
BOUNCE
表示該標(biāo)記應(yīng)該在原地彈跳。彈跳標(biāo)記將持續(xù)彈跳,直到其animation
屬性顯式設(shè)置為
null
。
您可以通過對 Marker
對象調(diào)用 setAnimation()
來對現(xiàn)有標(biāo)記啟動動畫。
以下示例將展示標(biāo)注動畫,并且是可以拖動
var google_map = new BigeMap();
var marker;
function iniMap() {
var myOptions = {
//設(shè)置中心點(diǎn)
center: new google.maps.LatLng(30.54024807, 104.06966686),
//默認(rèn)顯示級別
zoom: 4,
//是否顯示街景 因?yàn)榇蟛糠质请x線,所以不需要顯示
streetViewControl: false,
mapTypeControlOptions: {
mapTypeIds: ['google_online_map']
}
};
//初始化map對象
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//像map對象中添加一種地圖
map.mapTypes.set('google', google_map);
marker = new google.maps.Marker({
position: new google.maps.LatLng(30.54024807, 104.06966686),
title:'Hello World!',
draggable: true,
animation: google.maps.Animation.DROP,
map:map
});
google.maps.event.addListener(marker,'click',function () {
toggleBounce();
});
//設(shè)置map對象默認(rèn)顯示 google 地圖 也就是上面的google_map對象
map.setMapTypeId('google');
}
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}