Bootstrap 3，模态和地图

Question

我正在为一家企业及其代理商页面开发一个网站。我已经为其本地化放置了地图。地图全屏可见，平板电脑和智能手机有响应模式。

这是我的问题：

有一个以模式打开地图的按钮，我们只能看到地图的三分之一或更少（或者如果您调整窗口大小或打开控制台，但这是合乎逻辑的）。我查看了 Stack 和其他网站，找到了其他有同样问题但在我的 js 中找不到问题的人。如何使用“google.maps.event.trigger(map, 'resize')”。

这是fiddle 和下面的代码

    function initialize()
{
    var latlng = new google.maps.LatLng(49.0931702,6.083775599999967);
    var latlng1 = new google.maps.LatLng(48.691925, 6.175345200000038);
    var latlng2 = new google.maps.LatLng(48.1116311, 5.13722800000005);
    var myOptions =
    {
        zoom: 18,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.EARTH
    };
    var myOptions2 =
    {
        zoom: 18,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.EARTH
    };
    var myOptions3 =
    {
        zoom: 18,
        center: latlng1,
        mapTypeId: google.maps.MapTypeId.EARTH
    };
    var myOptions4 =
    {
        zoom: 18,
        center: latlng1,
        mapTypeId: google.maps.MapTypeId.EARTH
    };
        var myOptions5 =
    {
        zoom: 18,
        center: latlng2,
        mapTypeId: google.maps.MapTypeId.EARTH
    };
        var myOptions6 =
    {
        zoom: 18,
        center: latlng2,
        mapTypeId: google.maps.MapTypeId.EARTH
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var map2 = new google.maps.Map(document.getElementById("map_canvas_2"), myOptions2);
    var map3 = new google.maps.Map(document.getElementById("map_canvas_3"), myOptions3);
    var map4 = new google.maps.Map(document.getElementById("map_canvas_4"), myOptions4);
    var map5 = new google.maps.Map(document.getElementById("map_canvas_5"), myOptions5);
    var map6 = new google.maps.Map(document.getElementById("map_canvas_6"), myOptions6);

google.maps.event.trigger(map, 'resize')
google.maps.event.trigger(map2, 'resize')
google.maps.event.trigger(map3, 'resize')
google.maps.event.trigger(map4, 'resize')
google.maps.event.trigger(map5, 'resize')
google.maps.event.trigger(map6, 'resize')
}

如果需要进一步说明，请告诉我。

Answer 1

一旦模式的动画完成，您应该调用google.maps.event.trigger(map, "resize")。

在您的 Javascript 中，首先将您的 $(document).on 代码中的 show.bs.modal 更改为 shown.bs.modal。这是 Bootstrap 3 中的正确名称。接下来，从 shown.bs.modal 内部调用 initialize()。