BootStrap中 在模态框modal中载入 地图插件

bt前端框架是现在很流行的一个前端快速开发自适应框架了,modal是里面用的很多的一个js插件。可以弹出一个很漂亮的模态框,但是当你在模态框里插入 百度地图或者其他地图的时候,弹出来的地图 中心点定位并不是在模态框中间

Posted by 昆山吴彦祖 on 2019.06.26

这个涉及到的就是js执行顺序的问题了,因为百度地图的js先进行执行,根据并不显示的modal 来定位了地图中心点。

所以当 modal弹出时,中心点会错位。


解决办法 (在 modal的载入事件中执行地图 中心点定位事件)


var map = new BMap.Map("container");
		
//右上角,仅包含平移和缩放按钮		
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); 
map.addControl(top_right_navigation);
		
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
		
$('#myModal').on('shown.bs.modal', function (e) {
			
    myGeo.getPoint("无锡市滨湖区联创大厦西楼", function(point){
        if (point) {				

           map.centerAndZoom(point, 15);
            map.addOverlay(new BMap.Marker(point));
        }else{
            alert("您选择地址没有解析到结果!");
        }
    }, "北京市"); 
		
    //初始化后移除model载入完成事件
    $("#myModal").off('shown.bs.modal')
})



bootstrap jquery h5