【百度地圖】標注點的動畫效果
(備注:demo中的密鑰是我自己 申請的。如果需要使用demo,請自己另外申請一個。)
效果如圖:
跳動的動畫:

墜落動畫:

所有的代碼:
<!DOCTYPE html><html lang="zh-cn"><meta charset="utf-8"><meta name="renderer" content="webkit"><!--360,以webkit內核進行渲染--><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><!--以最新內核進行渲染。--><meta http-equiv="Cache-Control" content="no-siteapp"/><!--百度禁止轉碼--><title>moyu demo</title><meta name="keywords" content="demo 測試 魔芋"><meta name="description" content="魔芋的測試示例"><meta name="robots" content="index,follow"><!--定義網頁搜索引擎索引方式--><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script><script src="http://api.map.baidu.com/api?v=2.0&ak=1ixirBnjW51i4NoOdEKGP3Xk" type="text/javascript"></script><style>body, html {width:100%;}#allmap {width:100%;height:400px;overflow: hidden;margin:0;font-family:"微軟雅黑";}input {width:200px;height:30px;color:#000;}</style></head><body><div id="allmap"></div><input type="button"class="add" value="添加跳動的動畫" onclick ="addOne()"/><input type="button"class="add" value="添加墜落動畫" onclick="addTwo()"/><input type="button"class="add" value="清除動畫" onclick="clearlay()"/><script>var map =newBMap.Map("allmap");var point =newBMap.Point(116.404,39.915);map.centerAndZoom(point,15);function addOne (){map.clearOverlays();var marker =newBMap.Marker(point);// 創建標注map.addOverlay(marker);// 將標注添加到地圖中marker.setAnimation(BMAP_ANIMATION_BOUNCE);//跳動的動畫}function addTwo (){map.clearOverlays();var marker =newBMap.Marker(point);// 創建標注map.addOverlay(marker);// 將標注添加到地圖中marker.setAnimation(BMAP_ANIMATION_DROP);//墜落動畫}function clearlay(){map.clearOverlays();}</script></body></html>
請點擊:demo
鏈接:http://pan.baidu.com/s/1gd2kuD9
密碼:wtqi
