您可以通过动画的方式呈现标记,以便它们能够在各种不同的情况下展现出动态移动的效果。要指定某个标记的
动画呈现方式,请使用该标记的 animation
属性,其类型为 google.maps.Animation
。可支持以
下 Animation
值:
DROP
表示第一次将该标记放置在地图上时,该标记应该从地图顶部下落到其最终位置。一旦标记停止移
动,动画即停止,并且 animation
将还原为 null
。在创建 Marker
时,通常会指定这种类型的动
画。
BOUNCE
表示该标记应该在原地弹跳。弹跳标记将持续弹跳,直到其 animation
属性显式设置
为 null
。
您可以通过对 Marker
对象调用 setAnimation()
来对现有标记启动动画。
以下示例将展示标注动画,并且是可以拖动
var google_map = new BigeMap();
var marker;
function iniMap() {
var myOptions = {
//设置中心点
center: new google.maps.LatLng(30.54024807, 104.06966686),
//默认显示级别
zoom: 4,
//是否显示街景 因为大部分是离线,所以不需要显示
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();
});
//设置map对象默认显示 google 地图 也就是上面的google_map对象
map.setMapTypeId('google');
}
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
免费咨询电话
淘宝店铺