百度地图自定义覆盖物自定义信息框
来源:互联网 发布:精仿aj淘宝店 编辑:程序博客网 时间:2024/06/10 00:18
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);
0 0
- 百度地图自定义覆盖物自定义信息框
- 百度地图自定义覆盖物
- 百度地图自定义覆盖物
- 百度地图自定义覆盖物
- android百度地图自定义覆盖物
- 基于百度地图,绘制自定义覆盖物
- 百度地图自定义覆盖物替换
- 百度地图API-自定义图标覆盖物
- 百度地图API学习之定位当前位置及自定义覆盖物和信息窗口
- 百度地图API如何给自定义覆盖物添加事件
- 百度地图JS版API自定义覆盖物和控件
- 【百度地图API】如何给自定义覆盖物添加事件
- 在android百度地图上添加自定义覆盖物
- 最新百度地图android sdk自定义覆盖物
- 百度地图POI周边检索/自定义覆盖物
- 百度地图API自定义覆盖物与添加点击事件
- 百度地图——自定义覆盖物Marker
- 百度地图添加复杂的自定义覆盖物
- 生活中遇到傻逼怎么办?
- JSTL-核心标签库
- 本站使用插件统计
- vim的ex模式用法
- 史上最全的android学习资料
- 百度地图自定义覆盖物自定义信息框
- 哈夫曼树(huffman)
- 最简单使用的配置登录拦截器(过滤器)的方法(SSH)
- WordPress使用问题集
- 猴子吃桃问题
- 打开计算机的管理需要在控制面板中创建关联
- Redis的安装及碰到的问题
- GetDialogBaseUnits
- 一声叹息