【百度地圖】標注點的動畫效果


【百度地圖】標注點的動畫效果

(備注:demo中的密鑰是我自己 申請的。如果需要使用demo,請自己另外申請一個。)

 

效果如圖:

跳動的動畫:

 

123.gif

 

墜落動畫:

222.gif

 

所有的代碼:

 

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <meta charset="utf-8">
  4. <meta name="renderer" content="webkit"><!--360,以webkit內核進行渲染-->
  5. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><!--以最新內核進行渲染。-->
  6. <meta http-equiv="Cache-Control" content="no-siteapp"/><!--百度禁止轉碼-->
  7. <title>moyu demo</title>
  8. <meta name="keywords" content="demo 測試 魔芋">
  9. <meta name="description" content="魔芋的測試示例">
  10. <meta name="robots" content="index,follow"><!--定義網頁搜索引擎索引方式-->
  11. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12. <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  13. <script src="http://api.map.baidu.com/api?v=2.0&ak=1ixirBnjW51i4NoOdEKGP3Xk" type="text/javascript"></script>
  14. <style>
  15. body, html {width:100%;}
  16. #allmap {width:100%;height:400px;overflow: hidden;margin:0;font-family:"微軟雅黑";}
  17. input {width:200px;height:30px;color:#000;}
  18. </style>
  19. </head>
  20. <body>
  21. <div id="allmap"></div>
  22. <input type="button"class="add" value="添加跳動的動畫" onclick ="addOne()"/>
  23. <input type="button"class="add" value="添加墜落動畫" onclick="addTwo()"/>
  24. <input type="button"class="add" value="清除動畫" onclick="clearlay()"/>
  25. <script>
  26. var map =newBMap.Map("allmap");
  27. var point =newBMap.Point(116.404,39.915);
  28. map.centerAndZoom(point,15);
  29. function addOne (){
  30. map.clearOverlays();
  31. var marker =newBMap.Marker(point);// 創建標注
  32. map.addOverlay(marker);// 將標注添加到地圖中
  33. marker.setAnimation(BMAP_ANIMATION_BOUNCE);//跳動的動畫
  34. }
  35. function addTwo (){
  36. map.clearOverlays();
  37. var marker =newBMap.Marker(point);// 創建標注
  38. map.addOverlay(marker);// 將標注添加到地圖中
  39. marker.setAnimation(BMAP_ANIMATION_DROP);//墜落動畫
  40. }
  41. function clearlay(){
  42. map.clearOverlays();
  43. }
  44. </script>
  45. </body>
  46. </html>
 

請點擊:demo

鏈接:http://pan.baidu.com/s/1gd2kuD9

密碼:wtqi

 



 



附件列表

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM