--------------------------------------------------------------
百度地圖才接觸，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)" onclick="$(\'#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)" onclick="$(\'#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;
}