【百度地图】标注点的动画效果【百度地图】标注点的动画效果
（备注：demo中的密钥是我⾃⼰申请的。如果需要使⽤demo，请⾃⼰另外申请⼀个。）
效果如图：
跳动的动画：
坠落动画:
所有的代码：
<!DOCTYPE html>
<html lang="zh-cn">
<meta charset="utf-8">
<meta name="renderer" content="webkit"><!--360，以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="libs.baidu/jquery/1.9.1/jquery.js"></script>
<script src="api.map.baidu/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);
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();
html动画效果
}
</script>
</body>
</html>
请点击：
链接：
密码：wtqi
附件列表