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

最新推荐文章于 2024-08-24 08:00:00 发布

转载最新推荐文章于 2024-08-24 08:00:00 发布 · 1.9k 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/moyuling/p/4977433.html

文章标签：

#javascript #移动开发 #ViewUI

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

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

效果如图：

跳动的动画：

坠落动画:

所有的代码：

<!DOCTYPE html>
<html lang="zh-cn">
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<title>moyu demo</title>
<meta name="keywords" content="demo 测试魔芋">
<meta name="description" content="魔芋的测试示例">
<meta name="robots" content="index,follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=1ixirBnjW51i4NoOdEKGP3Xk" type="text/javascript"></script>
<style>
body, html {width:100%;}
#allmap {width:100%;height:400px;overflow: hidden;margin:0;font-family:"微软雅黑";}
input {width:200px;height:30px;color:#000;}
</style>
</head>
<body>
<div id="allmap"></div>
<input type="button"class="add" value="添加跳动的动画" onclick ="addOne()"/>
<input type="button"class="add" value="添加坠落动画" onclick="addTwo()"/>
<input type="button"class="add" value="清除动画" onclick="clearlay()"/>
<script>
var map =newBMap.Map("allmap");
var point =newBMap.Point(116.404,39.915);
map.centerAndZoom(point,15);
function addOne (){
map.clearOverlays();
var marker =newBMap.Marker(point);// 创建标注
map.addOverlay(marker);// 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE);//跳动的动画
}
function addTwo (){
map.clearOverlays();
var marker =newBMap.Marker(point);// 创建标注
map.addOverlay(marker);// 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_DROP);//坠落动画
}
function clearlay(){
map.clearOverlays();
}
</script>
</body>
</html>