你的位置:首页 > 网页设计

[网页设计]【百度地图】标注点的动画效果


【百度地图】标注点的动画效果

(备注: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="author" content="魔芋,15000720652@163.com,http://www.cnblogs.com/moyuling/">
  11. <meta name="robots" content="index,follow"><!--定义网页搜索引擎索引方式-->
  12. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  13. <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  14. <script src="http://api.map.baidu.com/api?v=2.0&ak=1ixirBnjW51i4NoOdEKGP3Xk" type="text/javascript"></script>
  15. <style>
  16. body, html {width:100%;}
  17. #allmap {width:100%;height:400px;overflow: hidden;margin:0;font-family:"微软雅黑";}
  18. input {width:200px;height:30px;color:#000;}
  19. </style>
  20. </head>
  21. <body>
  22. <div id="allmap"></div>
  23. <input type="button"class="add" value="添加跳动的动画" onclick ="addOne()"/>
  24. <input type="button"class="add" value="添加坠落动画" onclick="addTwo()"/>
  25. <input type="button"class="add" value="清除动画" onclick="clearlay()"/>
  26. <script>
  27. var map =newBMap.Map("allmap");
  28. var point =newBMap.Point(116.404,39.915);
  29. map.centerAndZoom(point,15);
  30. function addOne (){
  31. map.clearOverlays();
  32. var marker =newBMap.Marker(point);// 创建标注
  33. map.addOverlay(marker);// 将标注添加到地图中
  34. marker.setAnimation(BMAP_ANIMATION_BOUNCE);//跳动的动画
  35. }
  36. function addTwo (){
  37. map.clearOverlays();
  38. var marker =newBMap.Marker(point);// 创建标注
  39. map.addOverlay(marker);// 将标注添加到地图中
  40. marker.setAnimation(BMAP_ANIMATION_DROP);//坠落动画
  41. }
  42. function clearlay(){
  43. map.clearOverlays();
  44. }
  45. </script>
  46. </body>
  47. </html>

 

请点击:demo

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

密码:wtqi

 



 



附件列表

  • 123.gif
  • 222.gif