百度地图隐藏后显示地图只显示一部分

前端页面：

$("#reviseBan").click(function(){

var ModifyMap = new BMap.Map("ModifyMap",{enableMapClick: false});    

     var pointer = new BMap.Point(res.data.BanGpsX,res.data.BanGpsY);                    
                ModifyMap.centerAndZoom(pointer, 15);        
                ModifyMap.setCenter(pointer);
                marker = new BMap.Marker(pointer);
                ModifyMap.addOverlay(marker);
                var xy = document.getElementById('xy');
                xy.value=res.data.BanGpsX+','+res.data.BanGpsY;
                ModifyMap.addEventListener("click",function(e){
                opsiX =  e.point.lng;
                opsiY = e.point.lat;
                point = new BMap.Point(opsiX,opsiY);    
            if(e.overlay){            
                marker.οndblclick=function(){
                    url='/public/baidumap/big.html?position='+xy.value;
                    window.open(url,'parent');
        };
            }else{
                   ModifyMap.clearOverlays()            
                marker = new BMap.Marker(point);  // 创建标注
                ModifyMap.addOverlay(marker);
                xy.value=opsiX+','+opsiY;
                
        }

            });

这是我的代码。不能显示有两个原因：

1.

var ModifyMap = new BMap.Map("ModifyMap",{enableMapClick: false});  

创建实例的时候写在了click里面

2.容器处于隐藏状态导致的，api会认为地图宽高为0。

解决办法：1.把ModifyMap移入click外面

2.让弹出层dispaly=block;我layer的弹出层，执行地图之前要弹出层display=block；关闭的时候layer使用end方法让他隐藏

修改后代码：

$("#reviseBan").click(function(){
var obj = $('.checkId');
var objLength = $('.checkId').length;
for(var i = 0;i < obj.length;i++){
if(obj[i].checked){
var BanID = obj.eq(i).val();
}
}
//var vanId = $('.checkId').eq(0).val();
if(BanID == undefined){
layer.msg('请先选择要修改的信息');
}else{

$.get('/ph/ConfirmBanInfo/edit/BanID/'+BanID,function(res){
res = JSON.parse(res);
console.log(res);
if(res.data.BanGpsX==""||res.data.BanGpsY==""){
res.data.BanGpsX = "114.334228";
res.data.BanGpsY = "30.560372";
};

$('#modifyForm').css('display','block');
var ModifyMap = new BMap.Map("ModifyMap",{enableMapClick: false});

ModifyMap.clearOverlays();
var pointer = new BMap.Point(res.data.BanGpsX,res.data.BanGpsY);
ModifyMap.centerAndZoom(pointer, 15);
// ModifyMap.setCenter(pointer);
marker = new BMap.Marker(pointer);
ModifyMap.addOverlay(marker); 
// ModifyMap.centerAndZoom(pointer, 15);
var xy = document.getElementById('xy');
xy.value=res.data.BanGpsX+','+res.data.BanGpsY;
ModifyMap.addEventListener("click",function(e){
opsiX =  e.point.lng;
opsiY = e.point.lat;
point = new BMap.Point(opsiX,opsiY);


       if(e.overlay){        
           marker.οndblclick=function(){
            url='/public/baidumap/big.html?position='+xy.value;
            window.open(url,'parent');
   };
       }else{
          ModifyMap.clearOverlays()
marker = new BMap.Marker(point);  // 创建标注
ModifyMap.addOverlay(marker); 
        xy.value=opsiX+','+opsiY;
       
   }
       });//小地图
//获取坐标地址结束

window.addEventListener('message', function(e) {
       ModifyMap.clearOverlays();
  point = new BMap.Point(e.data.x,e.data.y);
  ModifyMap.centerAndZoom(point, 15); 
 
  marker = new BMap.Marker(point); 
  ModifyMap.addOverlay(marker); 
  xy.value=e.data.x+','+e.data.y;})
ModifyMap.enableScrollWheelZoom(true);
//影像资料修改
var editLandCertificate = $('#editLandCertificate');
var imgShowOne = $('#imgShowOne');
readFile(editLandCertificate,imgShowOne);
var editRealEstate = $('#editRealEstate');
var imgShowTwo = $('#imgShowTwo');
readFile(editRealEstate,imgShowTwo);
var editImgReload = $('#editImgReload');
var imgShowThree = $('#imgShowThree');
readFile(editImgReload,imgShowThree);


layer.open({
// $('#modifyForm').css('display','block');
type:1,
zIndex:100,
title:['修改楼栋','color:#FFF;font-size:1.6rem;font-weight:600;'],
content:$('#modifyForm'),
area:['800px','600px'],
btn:['确定','取消'],
yes:function(thisIndex){
var data = new FormData($('#modifyForm')[0]);
console.log(data);
$.ajax({
url:"/ph/ConfirmBanInfo/edit",
type:"post",
data:data,
dataType:'JSON',
processData: false,
            contentType: false
}).done(function(result){
console.log(result);
if(result.retcode == 2000){
// layer.confirm(result.msg,{title:'提示信息',icon:'1',skin:'lan_class'},function(conIndex){
// layer.close(thisIndex);
// layer.close(conIndex);
// location.reload();
// });
layer.msg(result.msg);
layer.close(thisIndex);
location.reload();
}else{
// layer.confirm(result.msg,{title:'提示信息',icon:'1',skin:'lan_class'},function(conIndex){
// layer.close(conIndex);
// });
layer.msg(result.msg);
}
});
},
end:function(){
$('#modifyForm').css('display','none');
}
})

});
}
});

初学者~~~自己的解决办法。不知道能不能帮到大家~~