1. 程式人生 > >百度地圖自定義覆蓋物自定義資訊框

百度地圖自定義覆蓋物自定義資訊框

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()
    
};

HumanMap(data_infoveh);