zoukankan      html  css  js  c++  java
  • 【百度地图】标注点的动画效果

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

    (备注: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

     





    附件列表

  • 相关阅读:
    webgl变换:深入图形平移
    webgl基础:顶点到片元的联动
    webgl基础:绘制多边形
    webgl初章:进入3D世界
    canvas动画实战与性能优化
    初识canvas(二)
    初识canvas(一)
    SQL换行符
    正则表达式校验
    2019.7.2 JQ
  • 原文地址:https://www.cnblogs.com/moyuling/p/4977433.html
Copyright © 2011-2022 走看看