谷歌离线地图 教程

以动画方式呈现标记

编辑时间:2017-03-03

QQ截图20170303091746.png

    您可以通过动画的方式呈现标记,以便它们能够在各种不同的情况下展现出动态移动的效果。要指定某个标记的

动画呈现方式,请使用该标记的 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);
   
}
}