--------------------------------------------------------------
百度地图才接触,javascript也不过是学了几天
用了1天完成了 类似播放器的功能,代码不够美观
再加上对api的不熟悉,所以我自己加了很多用于
判断的flag,大家凑合看,共同学习,共同进步。
如果有更好的办法,请指教和更正。。
---------------------------------------------------------------
//左边树
var menuTree;//地图
var map;
//时间框
var dlg_Edit1;
//markerArr
var arr;
//label
var label;
//marker
var m1;
//循环
var interval;
//坐标点下标
var counterM = 0;
//searchInfoWindow
var searchInfoWindow;
//是否正在回放(0未回放,1在回放)
var startButtonStats=0
//searchInfoWindowClick状态(0InfoWindow未打开,1InfoWindow以打开)
var searchInfoWindowClick = 0;
//默认回放速度
var speedTimes=1000;
//回放结束(可以调用CM 0,不许调用CM 1)
var reIs = 0;
/**
*初始化;
*/
$(function () {
//创建Map实例
initMap();
//绑定事件
startEvent();
//init div button
initButton();
// 创建tree
menuTree = $('#menuTree').tree({
title: '车辆轨迹回放',
iconCls: 'icon-save',
url: '../vehicleMonitor/addTree.action',
onClick: function(node){
//叶节点
if(isLeaf()){
$("#id").val(node.id);
//弹出查询时间框
divSelBeToEnTimeOpen();
}
},
animate: true
});
$('body').layout();
});
/**
*编写自定义函数,创建标注;
*/
function initMap(){
createMap();
addMapControl();
}
/**
*创建地图函数;
*/
function createMap(){
//在百度地图容器中创建一个地图
map = new BMap.Map("allmap");
//定义一个中心点坐标
var point = new BMap.Point(116.404, 39.915);
//设定地图的中心点和坐标并将地图显示在地图容器中
map.centerAndZoom('北京',13);
}
/**
*地图控件添加函数;
*/
function addMapControl(){
// 添加平移缩放控件
map.addControl(new BMap.NavigationControl());
// 添加比例尺控件
map.addControl(new BMap.ScaleControl());
//添加缩略地图控件
map.addControl(new BMap.OverviewMapControl());
//启用滚轮放大缩小
map.enableScrollWheelZoom();
//启用键盘上下左右键移动地图
map.enableKeyboard();
}
/**
*播放条绑定事件;
*/
function startEvent(){
$("#run").click(function() {
startLushu();
});
$("#stop").click(function() {
stopLushu();
});
$("#pause").click(function() {
pauseLushu();
});
$("#speedUp").click(function() {
speedUpLushu();
});
$("#speedReduction").click(function() {
speedReductionLushu();
});
}
/**
*init div button;
*/
function initButton(){
//弹出框
dlg_Edit1 = $('#dlg1').dialog({
closed: true,
modal: true,
buttons: [{
text: '查询',
iconCls: 'icon-save',
handler: selBeToEnTime
},{
text: '关闭',
iconCls: 'icon-no',
handler: function () {
dlg_Edit1.dialog('close');
}
}]
});
//Slider
$('#videoSlider').slider({
tipFormatter: function(value){
return value + '%';
},
onChange: function(value){
//未回放
if(startButtonStats == 0 && reIs == 0){
if(null != arr){
//修改点下标
counterM = parseInt(arr.length * value / 100);
//创建marker
createMarker();
}
//设置成未回访
}else if(startButtonStats == 0 && reIs == 1){
reIs = 0;
}
}
});
}
/**
*弹出查询时间框;
*/
function divSelBeToEnTimeOpen(){
dlg_Edit1.dialog('open');
//置空
$('#starTime').datetimebox('setValue', '');
$('#endTime').datetimebox('setValue', '');
}
/**
*查询回放数据;
*/
function selBeToEnTime(){
if($("#form1").form('validate')){
$.ajax({
type: 'POST',
url: '../vehicleTrack/selBeToEnTime.action',
data:{
"vehicleTrackInput.id":$("#id").val(),
"vehicleTrackInput.starTime":$('#starTime').datetimebox('getValue'),
"vehicleTrackInput.endTime":$('#endTime').datetimebox('getValue')
},
success: function (data) {
dlg_Edit1.dialog('close');
//重置页面变量
resetting();
var json=eval("("+data+")");
var markerArr = json.arr;
arr = new Array();
for(var i = 0 ;i < markerArr.length;i++){
arr.push(new BMap.Point(markerArr[i].x,markerArr[i].y));
}
var polyline = new BMap.Polyline([], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
polyline.setPath(arr);
//添加线路
map.addOverlay(polyline);
//最佳视野
map.setViewport(arr);
}
});
};
}
/**
*重置页面变量;
*/
function resetting(){
speedTimes=1000;
$('#speed').text(1);
startButtonStats = 0;
window.clearInterval(interval);
counterM = 0;
$('#videoSlider').slider('setValue',0);
}
/**
*开始;
*/
function startLushu(){
if(0 == startButtonStats){
startButtonStats = 1;
interval = window.setInterval(function(){
createMarker();
}, speedTimes);
}
}
/**
*停止;
*/
function stopLushu(){
resetting();
}
/**
*暂停;
*/
function pauseLushu(){
startButtonStats = 0;
window.clearInterval(interval);
}
/**
*加速;
*/
function speedUpLushu(){
var speed = $('#speed').text();
if(speed > 0 && speed < 8 ){
speed = speed * 2;
$('#speed').text(speed);
speedTimes = 1000/speed;
if(startButtonStats == 1){
window.clearInterval(interval);
startButtonStats = 0;
startLushu();
}
}
}
/**
*减速;
*/
function speedReductionLushu(){
var speed = $('#speed').text();
if(speed > 1 && speed < 9 ){
speed = speed / 2;
$('#speed').text(speed);
speedTimes = 1000/speed;
if(startButtonStats == 1){
window.clearInterval(interval);
startButtonStats = 0;
startLushu();
}
}
}
/**
*创建marker,label;
*/
function createMarker(){
var point = arr[counterM];
if(counterM < arr.length){
counterM = counterM + 1;
}else{
//不再允许调用createMarker();
reIs = 1;
resetting();
}
//var myIcon = new BMap.Icon("../image/akg.png", new BMap.Size(150,150));
//m1 = new BMap.Marker(myP2,{icon:myIcon});
//map.clearOverlays();
map.removeOverlay(label);
map.removeOverlay(m1);
//添加标记
m1 = new BMap.Marker(point);
//设置searchInfoWindow打开状态
if(1 == searchInfoWindowClick){
searchInfoWindow.open(m1);
}
//marker绑定事件
m1.addEventListener("click", function(e){
markInfoWindows(id)
searchInfoWindow.open(m1);
});
var opts = {
position : point, // 指定文本标注所在的地理位置
offset : new BMap.Size(-30, 0) //设置文本偏移量
}
label = new BMap.Label("辽A54250", opts); // 创建文本标注对象
label.setStyle({
color : "red",
fontSize : "12px",
height : "20px",
lineHeight : "20px",
fontFamily:"微软雅黑"
});
map.addOverlay(label);
map.addOverlay(m1);
//Slider百分比设置
var x = parseInt(100 * counterM / arr.length);
$('#videoSlider').slider('setValue',x);
}
/**
*创建markInfoWindows;
*/
function markInfoWindows(id){
$.ajax({
type: 'POST',
url: '../vehicleTrack/selVehicleTrackInfo.action',
data:{
"vehicleTrackInput.id":$("#id").val()
},
async:false,
error: function () {
$.messager.alert('提示信息', '失败!', 'error');
},
success: function (data) {
var json=eval("("+data+")");
title = json.company;
markInfoWindowsData(json.company);
}
});
}
/**
*init searchInfoWindow;
*/
function markInfoWindowsData(title){
var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
'地址:北京市海淀区上地十街10号<br/>电话:(010)59928888<br/>简介:百度大厦位于北京市海淀区西二旗地铁站附近,为百度公司综合研发及办公总部。'+'</div>'+
'<div style="margin:0;line-height:20px;padding:2px;">' +
'<a href="javascript:void(0)" οnclick="$(\'#dlg1\').dialog(\'open\')"><img src="../image/baidu.jpg" alt="" style="float:left;zoom:1;overflow:hidden;width:35px;height:35px;"/></a>' +
'<a href="javascript:void(0)" οnclick="$(\'#dlg2\').dialog(\'open\')"><img src="../image/baidu.jpg" alt="" style="float:left;zoom:1;overflow:hidden;width:35px;height:35px;margin-left:5px;"/></a>' +
'</div>';
//创建检索信息窗口对象
searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
title : title, //标题
width : 290, //宽度
height : 130, //高度
panel : "panel", //检索结果面板
enableAutoPan : true, //自动平移
searchTypes :[
//BMAPLIB_TAB_SEARCH, //周边检索
//BMAPLIB_TAB_TO_HERE, //到这里去
//BMAPLIB_TAB_FROM_HERE //从这里出发
]
});
//记录searchInfoWindowClick打开和关闭状态。
searchInfoWindow.addEventListener("close", function(e) {
searchInfoWindowClick = 0;
});
searchInfoWindow.addEventListener("open", function(e) {
searchInfoWindowClick = 1;
});
}
/**
*判断树是否是子节点,是子节点返回true,不是返回false;
*/
function isLeaf(){
var node = $('#menuTree').tree('getSelected');
var b = $('#menuTree').tree('isLeaf',node.target);
return b;
}