百度地圖自定義覆蓋物自定義資訊框
阿新 • • 發佈:2019-02-07
var timeOut=null;
// 新增彈出框資料
var data_infoveh = [
[117.215914,39.190908,'1','30','0001','12345678','2016年12月30日',100,'1:30',],
[129.404425,37.669868,'2','30','0002','12345678','2016年12月30日',200,'2:30',],
[111.716147,25.55156,'3','30','0003','12345678','2016年12月30日',300,'3:30',],
[115.225914,39.290908,'4','30','0004','12345678','2016年12月30日',400,'4:30',],
[126.454425,37.769868,'5','30','0005','12345678','2016年12月30日',500,'5:30',],
[117.716147,25.65156,'6','30','0006','12345678','2016年12月30日',600,'6:30',],
[118.235914,39.390908,'7','30','0007','12345678','2016年12月30日',700,'7:30',],
[121.494425,37.969868,'8','30','0008','12345678','2016年12月30日',800,'8:30',],
[112.716147,25.85156,'9','30','0009','12345678','2016年12月30日',900,'9:30',],
[121.480237,31.236305,'10','30','0010','12345678','2016年12月30日',1000,'10:30',],
[120.161693,30.280059,'11','30','0011','12345678','2016年12月30日',1100,'11:30',],
[116.413554,39.911013,'12','30','0012','12345678','2016年12月30日',1200,'12:30',],
[106.557165,29.570997,'13','30','0013','12345678','2016年12月30日',1300,'13:30',],
[113.631349,34.753488,'14','30','0014','12345678','2016年12月30日',60,'14:30',],
[113.270793,23.135308,'15','30','0015','12345678','2016年12月30日',80,'15:30',],
];
function HumanMap(data_infoveh){
var map = new BMap.Map("HumanMap",{enableMapClick: false});
map.centerAndZoom(new BMap.Point(105.723174,36.07597),5);
// 禁止雙擊地圖放大
map.disableDoubleClickZoom();
// 改變地圖背景樣式
function changeMapStyleMap(style){
map.setMapStyle({style:style});
};
changeMapStyleMap("midnight"); // 改變背景顏色
map.enableScrollWheelZoom(); // 啟用滾輪放大縮小,預設禁用
var cityId=null;
// 複雜的自定義覆蓋物
//引數 point 座標 , backImg 圖片,oneparameter 周邊裝置數,twoparameter 上網人數 ,threeparameter 車牌號 ,fourparameter 裝置MAC,fiveparameter 時間
function ComplexCustomOverlay(point,backImg,num,oneparameter,twoparameter,threeparameter,fourparameter,fiveparameter){
this._point = point;
this._backImg=backImg;
this._num=num;
this._oneparameter=oneparameter;
this._twoparameter=twoparameter;
this._threeparameter=threeparameter;
this._fourparameter=fourparameter;
this._fiveparameter=fiveparameter;
};
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function(map){
this._map = map;
var div = this._div = document.createElement("div");
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.background = "url("+this._backImg+") no-repeat center center";
div.style.MozUserSelect = "none";
$(div).css({"position":"absolute","z-index":this._num,"cursor":"pointer","height":"30","width":"30","white-space":"nowrap","margin":"0","padding":"0","color":"#fff","font-size":"14px"});
$(div).attr({"num":this._num,"class":"pointD"});
// 滑過顯示盒子
var onediv=document.createElement("div");
$(onediv).css({"height":"30","width":"30","white-space":"nowrap","margin":"0","padding":"0","color":"#fff","text-align":"center","line-height":"30px"});
onediv.innerHTML=this._num;
$(div).append('<div class="disNCz" style="display:none; position:absolute;padding:10px; left:25px; top:-114px; width: 258px;height:99px; background:#366fb6;"><div style="width:258px;height: 20px;"><span style="float: left;width: 95px;">個數:</span><span style="float: left;width: 160px;">'+this._oneparameter+'個</span></div><div style="width: 258px;height: 20px;"><span style="float:left;width: 95px;">人數:</span><span style="float:left;width: 160px;">'+this._twoparameter+'人</span></div><div style="width: 258px;height: 20px;"><span style="float:left;width: 95px;">個數:</span><span style="float:left;width: 160px;">'+this._threeparameter+'</span></div><div style="width: 258px;height: 20px;"><span style="float:left;width: 95px;">個數:</span><span style="float:left;width: 160px;">'+this._fourparameter+'</span></div><div style="width:258px;height: 20px;"><span style="float:left;width: 95px;">時間:</span><span style="float:left;width: 160px;">'+this._fiveparameter+'</span></div></div>')
div.appendChild(onediv);
// 滑到顯示
$(div).mousemove(function(){
$(this).css("z-index","999999");
$(this).children(".disNCz").css("display","block");
});
// 滑過隱藏
$(div).mouseout(function(){
$(this).css("z-index",$(this).attr("num"));
$(this).children(".disNCz").css("display","none");
});
map.getPanes().labelPane.appendChild(div);
return div;
};
ComplexCustomOverlay.prototype.draw = function(){
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x-15+ "px";
this._div.style.top = pixel.y-15+"px";
};
// 把定位點新增到地圖中
var o=1;
function posiPoint(){
if(data_infoveh[o-1][2]>0 && data_infoveh[o-1][2] <=4){
var backImg = "../img/vehMap1.png";
}
if(data_infoveh[o-1][2]>4 && data_infoveh[o-1][2] <=8){
var backImg = "../img/vehMap2.png";
}
if(data_infoveh[o-1][2]>8 && data_infoveh[o-1][2] <=12){
var backImg = "../img/vehMap3.png";
}
if(data_infoveh[o-1][2]>12 && data_infoveh[o-1][2] <=15){
var backImg = "../img/vehMap4.png";
}
var pointd = new BMap.Point(data_infoveh[o-1][0],data_infoveh[o-1][1]);
var myCompOverlayveh = new ComplexCustomOverlay(pointd,backImg,o,data_infoveh[o-1][2],data_infoveh[o-1][3],data_infoveh[o-1][4],data_infoveh[o-1][5],data_infoveh[o-1][6]);
map.addOverlay(myCompOverlayveh);
o++;
if(o-1<data_infoveh.length){
timeOut=setTimeout(posiPoint,500);
};
};
posiPoint()
};
// 新增彈出框資料
var data_infoveh = [
[117.215914,39.190908,'1','30','0001','12345678','2016年12月30日',100,'1:30',],
[129.404425,37.669868,'2','30','0002','12345678','2016年12月30日',200,'2:30',],
[111.716147,25.55156,'3','30','0003','12345678','2016年12月30日',300,'3:30',],
[115.225914,39.290908,'4','30','0004','12345678','2016年12月30日',400,'4:30',],
[126.454425,37.769868,'5','30','0005','12345678','2016年12月30日',500,'5:30',],
[117.716147,25.65156,'6','30','0006','12345678','2016年12月30日',600,'6:30',],
[118.235914,39.390908,'7','30','0007','12345678','2016年12月30日',700,'7:30',],
[121.494425,37.969868,'8','30','0008','12345678','2016年12月30日',800,'8:30',],
[112.716147,25.85156,'9','30','0009','12345678','2016年12月30日',900,'9:30',],
[121.480237,31.236305,'10','30','0010','12345678','2016年12月30日',1000,'10:30',],
[120.161693,30.280059,'11','30','0011','12345678','2016年12月30日',1100,'11:30',],
[116.413554,39.911013,'12','30','0012','12345678','2016年12月30日',1200,'12:30',],
[106.557165,29.570997,'13','30','0013','12345678','2016年12月30日',1300,'13:30',],
[113.631349,34.753488,'14','30','0014','12345678','2016年12月30日',60,'14:30',],
[113.270793,23.135308,'15','30','0015','12345678','2016年12月30日',80,'15:30',],
];
function HumanMap(data_infoveh){
var map = new BMap.Map("HumanMap",{enableMapClick: false});
map.centerAndZoom(new BMap.Point(105.723174,36.07597),5);
// 禁止雙擊地圖放大
map.disableDoubleClickZoom();
// 改變地圖背景樣式
function changeMapStyleMap(style){
map.setMapStyle({style:style});
};
changeMapStyleMap("midnight"); // 改變背景顏色
map.enableScrollWheelZoom(); // 啟用滾輪放大縮小,預設禁用
var cityId=null;
// 複雜的自定義覆蓋物
//引數 point 座標 , backImg 圖片,oneparameter 周邊裝置數,twoparameter 上網人數 ,threeparameter 車牌號 ,fourparameter 裝置MAC,fiveparameter 時間
function ComplexCustomOverlay(point,backImg,num,oneparameter,twoparameter,threeparameter,fourparameter,fiveparameter){
this._point = point;
this._backImg=backImg;
this._num=num;
this._oneparameter=oneparameter;
this._twoparameter=twoparameter;
this._threeparameter=threeparameter;
this._fourparameter=fourparameter;
this._fiveparameter=fiveparameter;
};
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function(map){
this._map = map;
var div = this._div = document.createElement("div");
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.background = "url("+this._backImg+") no-repeat center center";
div.style.MozUserSelect = "none";
$(div).css({"position":"absolute","z-index":this._num,"cursor":"pointer","height":"30","width":"30","white-space":"nowrap","margin":"0","padding":"0","color":"#fff","font-size":"14px"});
$(div).attr({"num":this._num,"class":"pointD"});
// 滑過顯示盒子
var onediv=document.createElement("div");
$(onediv).css({"height":"30","width":"30","white-space":"nowrap","margin":"0","padding":"0","color":"#fff","text-align":"center","line-height":"30px"});
onediv.innerHTML=this._num;
$(div).append('<div class="disNCz" style="display:none; position:absolute;padding:10px; left:25px; top:-114px; width: 258px;height:99px; background:#366fb6;"><div style="width:258px;height: 20px;"><span style="float: left;width: 95px;">個數:</span><span style="float: left;width: 160px;">'+this._oneparameter+'個</span></div><div style="width: 258px;height: 20px;"><span style="float:left;width: 95px;">人數:</span><span style="float:left;width: 160px;">'+this._twoparameter+'人</span></div><div style="width: 258px;height: 20px;"><span style="float:left;width: 95px;">個數:</span><span style="float:left;width: 160px;">'+this._threeparameter+'</span></div><div style="width: 258px;height: 20px;"><span style="float:left;width: 95px;">個數:</span><span style="float:left;width: 160px;">'+this._fourparameter+'</span></div><div style="width:258px;height: 20px;"><span style="float:left;width: 95px;">時間:</span><span style="float:left;width: 160px;">'+this._fiveparameter+'</span></div></div>')
div.appendChild(onediv);
// 滑到顯示
$(div).mousemove(function(){
$(this).css("z-index","999999");
$(this).children(".disNCz").css("display","block");
});
// 滑過隱藏
$(div).mouseout(function(){
$(this).css("z-index",$(this).attr("num"));
$(this).children(".disNCz").css("display","none");
});
map.getPanes().labelPane.appendChild(div);
return div;
};
ComplexCustomOverlay.prototype.draw = function(){
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x-15+ "px";
this._div.style.top = pixel.y-15+"px";
};
// 把定位點新增到地圖中
var o=1;
function posiPoint(){
if(data_infoveh[o-1][2]>0 && data_infoveh[o-1][2] <=4){
var backImg = "../img/vehMap1.png";
}
if(data_infoveh[o-1][2]>4 && data_infoveh[o-1][2] <=8){
var backImg = "../img/vehMap2.png";
}
if(data_infoveh[o-1][2]>8 && data_infoveh[o-1][2] <=12){
var backImg = "../img/vehMap3.png";
}
if(data_infoveh[o-1][2]>12 && data_infoveh[o-1][2] <=15){
var backImg = "../img/vehMap4.png";
}
var pointd = new BMap.Point(data_infoveh[o-1][0],data_infoveh[o-1][1]);
var myCompOverlayveh = new ComplexCustomOverlay(pointd,backImg,o,data_infoveh[o-1][2],data_infoveh[o-1][3],data_infoveh[o-1][4],data_infoveh[o-1][5],data_infoveh[o-1][6]);
map.addOverlay(myCompOverlayveh);
o++;
if(o-1<data_infoveh.length){
timeOut=setTimeout(posiPoint,500);
};
};
posiPoint()
};
HumanMap(data_infoveh);