Amap_tarce_replay

来源：互联网发布：2015年京东双十一数据编辑：程序博客网时间：2024/06/06 02:25

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>轨迹回放</title>
<style type="text/css">
body{
margin:0;
height:80%;
width:80%;
position:absolute;
}
#mapContainer{
position: absolute;
top:0;
left: 0;
right:0;
bottom:0;
}
#tip{
height:45px;
background-color:#fff;
padding-left:10px;
padding-right:10px;
border:1px solid #969696;
position:absolute;
font-size:12px;
right:10px;
bottom:30px;
border-radius:3px;
line-height:45px;
}

#tip input[type='button']{
height:28px;
line-height:28px;
outline:none;
text-align:center;
padding-left:5px;
padding-right:5px;
color:#FFF;
background-color:#0D9BF2;
border:0;
border-radius: 3px;
margin-top:8px;
margin-left:5px;
cursor:pointer;
margin-right:10px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<div id="tip">
<input type="button" value="开始动画" onclick="startAnimation()"/>
<input type="button" value="停止动画" onclick="stopAnimation()"/>
</div>

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=6008796583d301fddad769918953bf92"></script>
<script type="text/javascript">
//初始化地图对象，加载地图
var map = new AMap.Map("mapContainer",{
resizeEnable: true,
//二维地图显示视口
view: new AMap.View2D({
//地图中心点
center:new AMap.LngLat(116.397428,39.90923),
//地图显示的缩放级别
zoom:17
}),
continuousZoomEnable:false
});
AMap.event.addListener(map,"complete",completeEventHandler);

//地图图块加载完毕后执行函数
function completeEventHandler(){
marker = new AMap.Marker({
map:map,
//draggable:true, //是否可拖动
position:new AMap.LngLat(116.397428,39.90923),//基点位置
icon:"http://code.mapabc.com/images/car_03.png", //marker图标，直接传递地址url
offset:new AMap.Pixel(-26,-13), //相对于基点的位置
autoRotation:true
});

var lngX = 116.397428;
var latY = 39.90923;
lineArr = new Array();
lineArr.push(new AMap.LngLat(lngX,latY));
for (var i = 1; i <3; i++){
lngX=lngX+Math.random()*0.05;
if(i%2){
latY = latY+Math.random()*0.0001;
}else{
latY = latY+Math.random()*0.06;
}
lineArr.push(new AMap.LngLat(lngX,latY));
}
//绘制轨迹
var polyline = new AMap.Polyline({
map:map,
path:lineArr,
strokeColor:"#00A",//线颜色
strokeOpacity:1,//线透明度
strokeWeight:3,//线宽
strokeStyle:"solid"//线样式
});
map.setFitView();
}
function startAnimation() {
marker.moveAlong(lineArr,500);
}
function stopAnimation() {
marker.stopMove();
}
</script>
</body>
</html>

0 0