在弹窗中使用百度地图,关闭时报错Cannot read property 'Xe' of undefined

Question

百度地图是放在弹窗中的,如下图:

弹窗是用display,none控制显示隐藏..
当关闭百度地图的时候会报:

请教一下各位大神,如何解决

    <div id="baiduMap"></div>

    var map;

    function initMap () {
        map = new BMap.Map('baiduMap')
        var position = new BMap.Geolocation()
        position.getCurrentPosition(function (pos) {
            map.centerAndZoom(new BMap.Point(pos.longitude, pos.latitude), 18)
            map.setCurrentCity(pos.address.city)
            map.enableScrollWheelZoom(true)
            setMap(map)
        })
    }

    function setMap (map) {
        var address = new BMap.Geocoder()
        map.addEventListener('click', function(t){
            console.log(t)
            var x = t.point.lng,
                y = t.point.lat
                
            address.getLocation(new BMap.Point(x, y), function (res) {
                map.clearOverlays()
                let addressName = res.address
                let lat = res.point.lat
                let lng = res.point.lng
                
                var point = new BMap.Point(res.point.lng, res.point.lat)
                var marker = new BMap.Marker(point)
                
                $('.reAdress').html('<p style="margin: 5px 0">地址:' + addressName + '</p> <p>经纬度: ' + lat + ',' + lng + '</p>')
                
                map.addOverlay(marker)
            })
        })
    }
    
    function showInstall () {
        initMap() // 打开弹窗初始化地图
        $('#installModal').modal('toggle')
    }
    
    function closeInstall() { // 关闭弹窗
        $('#installModal').modal('toggle')
    }
    

Answer 1

据猜测，应该问题还是因为地图 sdk 初始化时，容器元素还未出现在 dom 中吧，尝试利用回调函数或者简单粗暴地使用 setTimeout 等手段，当容器元素出现在 dom 中时，再调用 sdk 的初始化函数。

Answer 2

location.reload(); 刷新一下页面就没有了，实际上没有根本解决...
用的是 bootstrap modal 里面嵌套地图，看着这个 debug 错误心烦。