【百度地图】标注点的动画效果_html/css_WEB-ITnose

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

（备注：demo中的密钥是我自己 申请的。如果需要使用demo，请自己另外申请一个。）

效果如图：

跳动的动画：

立即学习“前端免费学习笔记（深入）”；

百度文心一格

百度推出的AI绘画作图工具

49

查看详情

坠落动画:

所有的代码：

19. body, html {width:100%;}
20. #allmap {width:100%;height:400px;overflow: hidden;margin:0;font-family:"微软雅黑";}
21. input {width:200px;height:30px;color:#000;}
33. <script></script>
34. var map =newBMap.Map("allmap");
35. var point =newBMap.Point(116.404,39.915);
36. map.centerAndZoom(point,15);
38. function addOne (){
39. map.clearOverlays();
40. var marker =newBMap.Marker(point);// 创建标注
41. map.addOverlay(marker);// 将标注添加到地图中
42. marker.setAnimation(BMAP_ANIMATION_BOUNCE);//跳动的动画
43. }
44. function addTwo (){
45. map.clearOverlays();
46. var marker =newBMap.Marker(point);// 创建标注
47. map.addOverlay(marker);// 将标注添加到地图中
48. marker.setAnimation(BMAP_ANIMATION_DROP);//坠落动画
49. }
50. function clearlay(){
51. map.clearOverlays();
52. }