多車監控時 infowindows不好控制 搞了很長時間 終於糾正了bug
//左邊樹
var menuTree;//地圖
var map;
//淡出框1
var dlg_Edit1;
//淡出框2
var dlg_Edit2;
//marker下紅色框
var label;
//定時器
var interval;
//searchInfoWindowClick狀態(0InfoWindow未打開,1InfoWindow以打開)
var searchInfoWindowClick = 0;
//創建檢索信息窗口對象
var searchInfoWindow = null;
//左側checkbox選中String
var s;
//markerList
var arr ;
//searchInfoWindowd正在打開的marker
var markerId;
//mark點;
var m1;
//title
var title;
/**
*初始化;
*/
$(function () {
//初始化Toolbar
initButton();
// 創建Map實例
initMap();
// 創建checkbox
menuTree = $('#menuTree').tree({
title: '車輛實時監控',
iconCls: 'icon-save',
checkbox:'true',
url: '../vehicleMonitor/addTree.action',
onCheck: function(node){
//獲取id串
var nodes = $('#menuTree').tree('getChecked');
s = '';
for(var i=0; i<nodes.length; i++){
if (s != '') s += ',';
s += nodes[i].id;
}
//重置
resetting();
//畫線
if(null != s && "" != s){
//調用
startDraw();
}
},
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(point,13);
}
/**
*地圖控件添加函數;
*/
function addMapControl(){
// 添加平移縮放控件
map.addControl(new BMap.NavigationControl());
// 添加比例尺控件
map.addControl(new BMap.ScaleControl());
//添加縮略地圖控件
map.addControl(new BMap.OverviewMapControl());
//啓用滾輪放大縮小
map.enableScrollWheelZoom();
//啓用鍵盤上下左右鍵移動地圖
map.enableKeyboard();
}
/**
*開始畫圖;
*/
function startDraw(){
//清楚標記
//map.clearOverlays();
arr = new Array();
//drawlineTimes();
interval = window.setInterval(function(){
drawlineTimes();
}, 2000);
}
/**
*循環調用畫圖;
*/
function drawlineTimes(){
$.ajax({
type: 'POST',
url: '../vehicleMonitor/selRoadMarker.action',
data:{
"vehicleMarkerInput.counterOne":$("#count1").val(),
"vehicleMarkerInput.counterTwo":$("#count2").val(),
"vehicleMarkerInput.idList":s
},
success: function (data) {
var json=eval("("+data+")");
map.clearOverlays();
$("#count1").val(json.counterOne);
$("#count2").val(json.counterTwo);
var markers = json.marker;
for(var i = 0; i < markers.length; i++){
createMarker(markers[i].dataXY.x,markers[i].dataXY.y,markers[i].id);
}
map.setViewport(arr);
}
});
}
/**
*創建marker,label;
*/
function createMarker(x,y,id){
//var myIcon = new BMap.Icon("../image/akg.png", new BMap.Size(150,150));
//m1 = new BMap.Marker(myP2,{icon:myIcon});
var myP2 = new BMap.Point(x,y);
arr.push(myP2);
m1 = new BMap.Marker(myP2);
//設置searchInfoWindow地理位置
if(1 == searchInfoWindowClick && id == markerId){
markInfoWindows(id);
//打開searchInfoWindow
searchInfoWindow.open(m1);
}
m1.addEventListener("click", function(e){
markInfoWindows(id);
//打開searchInfoWindow
searchInfoWindow.open(m1);
});
var opts = {
//指定文本標註所在的地理位置
position : myP2,
//設置文本偏移量
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);
}
/**
*創建markInfoWindows;
*/
function markInfoWindows(id){
$.ajax({
type: 'POST',
url: '../vehicleMonitor/selVehicleMonitorById.action',
data:{
"vehicleMonitorInput.id":id
},
async:false,
error: function () {
$.messager.alert('提示信息', '失敗!', 'error');
},
success: function (data) {
var json=eval("("+data+")");
title = json.company;
}
});
//顯示的代碼
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,
enableSendToPhone : false,//自動平移
searchTypes :[
//BMAPLIB_TAB_SEARCH, //周邊檢索
//BMAPLIB_TAB_TO_HERE, //到這裏去
//BMAPLIB_TAB_FROM_HERE //從這裏出發
]
});
//記錄searchInfoWindowClick打開和關閉狀態。
searchInfoWindow.addEventListener("close", function(e) {
markerId = id;
searchInfoWindowClick = 0;
});
searchInfoWindow.addEventListener("open", function(e) {
markerId = id;
searchInfoWindowClick = 1;
});
}
/**
*init div button;
*/
function initButton(){
dlg_Edit1 = $('#dlg1').dialog({
closed: true,
modal: true,
buttons: [{
text: '保存',
iconCls: 'icon-save',
/*handler: saveData*/
},{
text: '關閉',
iconCls: 'icon-no',
handler: function () {
dlg_Edit1.dialog('close');
}
}]
});
dlg_Edit2 = $('#dlg2').dialog({
closed: true,
modal: true,
buttons: [{
text: '保存',
iconCls: 'icon-save',
/*handler: saveData*/
},{
text: '關閉',
iconCls: 'icon-no',
handler: function () {
dlg_Edit2.dialog('close');
}
}]
});
//dlg_Edit1.dialog('open');
//dlg_Edit2.dialog('close');
}
/**
*重置數據;
*/
function resetting(){
$('#count1').val(0);
$('#count2').val(0);
map.clearOverlays();
window.clearInterval(interval);
arr = new Array();
}