百度地图API信息框在左上角应该怎么解决

应公司产品经理的要求，要做一个点击链接弹出地图的模态框。于是就用bootstrap自带的写了一个，写完之后呢，发现在弹出地图之后，信息框跑到了左上角。在网上查的都是怎么调整标注的位置，（也可能是我没找到），自己研究了半天终于搞定了。记录一下。方便下次使用，上代码

HTML：

   

       

           
英协广场客服中心
           

               
               查看地图
           
           

           

               
地址
               
郑汴路和建业路交叉口向西110米路北英协广场A座25楼
           
           

               
营业时间
               
09:00-17:30 （休息时间：无休）
           
           

               
联系电话
               
0371-66307747
           
       
   

JS：（用的JQ）

$(function(){
    var map = new BMap.Map("map");
    // 创建地图实例113.689086,34.787056
    var point = new BMap.Point(113.689086,34.787056);
    // 创建点坐标
    var marker = new BMap.Marker(point); // 创建标注    
    map.addOverlay(marker);// 将标注添加到地图中 
    map.addControl(new BMap.NavigationControl()); //地图左上方缩放控件
    var opts = {
        width : 230,     // 信息窗口宽度
        height: 90,     // 信息窗口高度
        offset: {width: 1, height: 1},
        enableAutoPan: true,
        title: "郑州市英协广场客服中心"  // 信息窗口标题
    }
    var infoWindow = new BMap.InfoWindow("郑州市金水区花园路", opts);  // 创建信息窗口对象
    infoWindow.setTitle('
郑州市英协广场客服中心
');
    infoWindow.setContent("
郑州市金水区花园路
");
    map.openInfoWindow(infoWindow, point);
    marker.addEventListener("click", function () {
        map.openInfoWindow(infoWindow, point);
    });
    map.enableScrollWheelZoom(true); //开启鼠标滚轮滑动缩放
    map.centerAndZoom(point, 16);  //生成地图以及设置地图大小比例
    
    // 点击地图叉号关闭地图
    $("#map_iconfont").on("click",function(){
        $('#Module_map').modal('hide');
    }) 

    $(".list_box_view .view_map").on("click",function(){
        $('#Module_map').modal('show');
        map.panBy(400, 150);//地图标注移动至页面中心点  
        // map.panBy(900, 300); 
    })
})

以上是完整地图的代码和最终效果
刚开始没说要信息框，地图在弹出后地图标注也是在左上角，跟下图一样

像这种情况只需要在生成地图以后添加这样一行代码map.panBy(600, 300);就可以了，里面的数字字呢，就好比X轴和Y轴，数字大小呢，就是你这个屏幕宽高的一半；请看下图

然后领加需求了，说是要信息框（代码如下图1），不然标注太小了，看不见。那加呗，加上之后信息框和标注就都跑左上角了。
没办法，研究吧。最后研究的结果就是，由于地图是弹出的，在地图生成的时候地图容器宽高都是0 ，弹出之后有宽高了，所以就跑左上角了。那既然知道原因了，就好办了，首先打开模态框的方式不要写在标签属性里面，使用JS打开模态框如下图2所示例

然后再打开地图之后，在用map.panBy(400, 150)调整信息框的位置，现在这个数值就需要自己一点一点慢慢调了，而不是模态框宽高的一半了。
这样信息框就到屏幕中间了
这个时候如果百度地图一直处于显示状态，这样就已经很完美了，但是如果你用的是模态框点击打开模态框第一次显示正常，那么在关闭掉模态框，再次打开的时候，会发现信息框跑到地图右下角了，这个是因为，map.panBy(400, 150)这行代码写在了打开模态框的点击事件里面，每次打开模态框，都会执行，所以信息框会一直往右下移动。模态框关闭之后，这个值没有清零。只要在关闭模态的事件函数里面加上一句代码map.panBy(-400, -150)就可以解决了，原理就是打开模态框你移动了多少，关闭的时候在还退回去多少