百度地图API-动态运行画面
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Track</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#controller{width:100%; border-bottom:3px outset; height:50px; line-height: 50px; filter:alpha(Opacity=100); -moz-opacity:1; opacity:1; z-index:10000; background-color:lightblue;}
#container{height:100%}
.btn {
background-color: green;
color: white;
display: inline-block;
padding: 5px 12px;
margin-bottom: 0;
font-family: inherit;
font-size: 13px;
font-weight: 400;
line-height: 1.53846154;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
-webkit-transition: all .8s cubic-bezier(.175,.885,.32,1);
-o-transition: all .8s cubic-bezier(.175,.885,.32,1);
transition: all .8s cubic-bezier(.175,.885,.32,1);
}
.btn:disabled {
background-color: grey;
}
a.btn {
text-decoration: none;
background: #8BCB25;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxx"></script>
<?php
$trackJson = CJavaScript::jsonEncode($trackArr);
?>
<script type="text/javascript">
//解析数组
var trackJsonObj = $.parseJSON('<?php echo $trackJson;?>');
var len = trackJsonObj.length;
var points=[];
$.each(trackJsonObj , function(index , obj) {
var point = new BMap.Point(obj.lng,obj.lat);
points.push(point);
});
var map; //百度地图对象
var car; //汽车图标
var label; //信息标签
var centerPoint;
var timer; //定时器
var index = 0; //记录播放到第几个point
var followChk, playBtn, pauseBtn, resetBtn; //几个控制按钮
function init() {
followChk = document.getElementById("follow");
playBtn = document.getElementById("play");
pauseBtn = document.getElementById("pause");
resetBtn = document.getElementById("reset");
//初始化地图,选取第一个点为起始点
map = new BMap.Map("container");
map.centerAndZoom(points[0], 16);
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl({isOpen: true}));
var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/Mario.png", new BMap.Size(32, 70), { //小车图片
offset: new BMap.Size(0, -5), //相当于CSS精灵
imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
});
//通过DrivingRoute获取一条路线的point
var driving = new BMap.DrivingRoute(map);
driving.search(points[0],points[len-1]);
driving.setSearchCompleteCallback(function () {
//得到路线上的所有point
// points = driving.getResults().getPlan(0).getRoute(0).getPath();
// //画面移动到起点和终点的中间
centerPoint = new BMap.Point((points[0].lng + points[points.length - 1].lng) / 2, (points[0].lat + points[points.length - 1].lat) / 2);
for(var i=0 , len=points.length ; i < len ; i++) {
var marker = new BMap.Marker(points[i]);
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
map.addOverlay(marker);
}
map.panTo(centerPoint);
//连接所有点
map.addOverlay(new BMap.Polyline(points, {strokeColor: "black", strokeWeight: 5, strokeOpacity: 1}));
//显示小车子
label = new BMap.Label("", {offset: new BMap.Size(-20, -20)});
car = new BMap.Marker(points[0],{icon:myIcon});
car.setLabel(label);
map.addOverlay(car);
//点亮操作按钮
playBtn.disabled = false;
resetBtn.disabled = false;
});
}
function play() {
playBtn.disabled = true;
pauseBtn.disabled = false;
var point = points[index];
if (index > 0) {
map.addOverlay(new BMap.Polyline([points[index - 1], point], {strokeColor: "red", strokeWeight: 1, strokeOpacity: 1}));
}
label.setContent("经度: " + point.lng + "<br>纬度: " + point.lat + "<br/>生成时间："+trackJsonObj[index].create_time);
car.setPosition(point);
index++;
if (followChk.checked) {
map.panTo(point);
}
if (index < points.length) {
timer = window.setTimeout("play(" + index + ")", 600);
} else {
playBtn.disabled = true;
pauseBtn.disabled = true;
map.panTo(point);
}
}
function pause() {
playBtn.disabled = false;
pauseBtn.disabled = true;
if (timer) {
window.clearTimeout(timer);
}
}
function reset() {
followChk.checked = false;
playBtn.disabled = false;
pauseBtn.disabled = true;
if (timer) {
window.clearTimeout(timer);
}
index = 0;
car.setPosition(points[0]);
map.panTo(centerPoint);
}
</script>
</head>
<body onload="init();">
<div id="controller" align="center">
<input id="follow" type="checkbox"><span style="font-size:12px;">画面跟随</span></input>
<input id="play" type="button" value="播放" onclick="play();" class="btn btn-edc-reset" disabled />
<input id="pause" type="button" value="暂停" onclick="pause();" class="btn btn-edc-reset" disabled />
<input id="reset" type="button" value="重置" onclick="reset()" class="btn btn-edc-reset" disabled />
<?php echo CHtml::link("返回",array("/userCenter/taskmonitoring/sa/view" , 'id'=>$tid), array('class'=>'btn'));?>
</div>
<div id="container"></div>
</body>
</html>
