百度 地图和高德地图 单击标注打开完全自定义的悬浮窗口

        <div class="col-md-10 col-sm-10 col-xs-12" style="border: 1px solid #fff;margin-top: 3%">
          <div style="width:100%;height: 700px;" id="allmap"></div>
        </div>
$(function(){
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(114.342913,38.048293), 17); // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
  mapTypes : [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]
}));
map.setCurrentCity("石家庄"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 
createMakers(map); });
function createMakers(map) {
  $.ajax({
        url: '', //请求地址
        type: "get", //请求方式
        dataType: 'jsonp', //指定jsonp数据类型
        async: false,
        success: function(data) {
          var dataObj = data;
          var light_data = null;
          var light_imei = null;
          let points = [];
          var pointArray = [];
          //循环后台数据
          for (var i = 0; i < dataObj.length; i++) {

            var databl = []; 
            var datarray  = [];
             //设备id
             databl["device_id"] = dataObj[i].device_id;
            //经纬度海拔
            databl ["light_imei"] = dataObj[i].light_imei;

            light_data = dataObj[i].light_data;

            for (var j = 0; j < light_data.length; j++) {
              databl["brightness"]=light_data[j].brightness;
              databl["power_a"]=light_data[j].power_a;
              databl["power_p"]=light_data[j].power_p;
              databl["power_v"]=light_data[j].power_v;
              databl["power_w"]=light_data[j].power_w;
              databl["lux"]=light_data[j].lux;
            }
            points.push(databl);}

        // 向地图添加标注
    for (var i = 0; i < points.length; i++) {(function (x) {
                       var point = new BMap.Point(points[x].light_imei.lng,points[x].light_imei.lat);    // 创建点坐标
                       map.centerAndZoom(point, 17);
                       var marker=new BMap.Marker(point,{icon:new BMap.Icon("./images/08.png", new BMap.Size(24, 24))});
                       var label = new BMap.Label(points[x].device_id,{offset:new BMap.Size(20,-10)});
                         label.setStyle(  {display:"none"});//对label 样式隐藏     marker.setLabel(label);  //把label设置到maker上  
                       var opts = {
                           title: '<div style="background-color: #00D1FF;color:#fff"> 路灯信息</div>'   // 信息窗口标题
                         }
                       //marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                       var content = '<table><tr><td>编号:0'+[x+1]+'</td><td>亮度:'+points[x].brightness+'</td></tr><tr><td>电压:'+points[x].v+'</td><td>电量:'+points[x].p+'</td></tr><tr><td>功率:'+points[x].w+'</td><td>电流:'+points[x].a+'</td></tr></table>';
                       var info_Window = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象

                       //鼠标点击标注要发生的事情
                       marker.addEventListener("click",attribute);

                         // 鼠标移上标注点要发生的事
                         marker.addEventListener("mouseover", function () {
                          this.openInfoWindow(info_Window);
                        });

                        // 鼠标移开标注点要发生的事
                        marker.addEventListener("mouseout", function () {
                          this.closeInfoWindow(info_Window);
                        });
                        map.addOverlay(marker);
                      })(i);
                    } 
                    map.addControl(new BMap.NavigationControl());

                    function attribute(e){
              var tag=e.target.getLabel().content; //点击maker点后获取label里面的内容

              var divNode = document.getElementById("light");
              divNode.style.display = "block"; 
              test (tag);
            }  

          }
        });
}