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

     





    附件列表

  • 相关阅读:
    未来十年Python的前景会怎样?
    mysql配置mha高可用防火墙未关闭报错
    Cenos7 切换单用户模式
    奇葩问题: lsattr -d /data 显示:----------I--e- /data/
    在Vue 的main.js 文件使用Element-UI的this.$message('msg')
    IIS上部署项目,网页控制台报错,.svg 等文件类型找不到
    git commit 格式
    Entity Framework 插入带有外键的数据,重新添加了外建表里的数据
    element-ui Select 组件传递对象
    Entity Framework Code First实体关联数据加载
  • 原文地址:https://www.cnblogs.com/moyuling/p/4977433.html
Copyright © 2011-2022 走看看