Question

我知道这个问题早已被提出，但我的情况略有不同。我也有在模式中显示谷歌地图的问题然后我在这里找到解决方案，即在地图上调用调整大小功能，以便它可以在模态中显示。它完全正常。但只是第一次，即当我打开模态一旦它显示地图很好，但当我关闭并再次打开它然后它再次部分渲染。

这是我的代码：

 $('#view-on-map').on('click', function () {
    initialize();
});
function initialize()
{
    var latitude = $("#latitude").text();
    var longitude = $("#longitude").text();
    var myCenter = new google.maps.LatLng(latitude, longitude);
    var mapProp = {
        center: new google.maps.LatLng(latitude, longitude),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("seller-map")
            , mapProp);

    var marker = new google.maps.Marker({
        position: myCenter,
    });
    google.maps.event.trigger(map, "resize");
    marker.setMap(map);
}

我做错了什么？我还想指出，我只是在加载模态时创建地图（如代码中所示），我试图在window.load事件上加载它，然后在打开模态时调用resize函数但是不工作。我的标记使用Simple Modal而不是引导程序。寻求帮助。谢谢。

Answer 1

当显示模态但单击#view-on-map时，您不会触发调整大小事件。

简单模态具有onShow函数：

模态对话框打开后使用的回调函数。用于绑定事件或在显示模式对话框元素后可能要执行的任何其他操作。如果您在模式对话框中包含另一个插件（TinyMCE，DatePicker等），则可以在此处初始化该插件。

从initialize功能中删除调整大小触发器。
加载地图（初始化）
创建模态并设置onShow回调以触发地图调整大小

示例：的

$("#element-id").modal({

    onShow: function () {

        google.maps.event.trigger(map, "resize");
    }
});

注意：

您的map变量必须是全局的。

谷歌地图重新打开模式问题

1 个答案: