Question

我在模式窗口中加载谷歌地图时遇到问题。基本上，当模态窗口打开时，我加载地图，但它不会完全渲染。

我要包含一个示例，以便您更好地理解问题。有人知道如何解决这个问题吗？

<html>

<head>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://www.jacklmoore.com/colorbox/colorbox/jquery.colorbox.js"></script>
    <script>
        $(document).ready(function(){
            $("#link").colorbox({
                inline:true, 
                width:"50%", 
                onOpen: function(){
                    $('#cboxClose').remove();
                    var script = document.createElement("script");
                        script.type = "text/javascript";
                        script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=showMapsStep1";
                        document.body.appendChild(script);
                }
            });


            window.showMapsStep1 = function(){


                var mapOptions = {
                    zoom: 8,
                    center: new google.maps.LatLng(-34.397, 150.644),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                var map = new google.maps.Map(document.getElementById("canvas"), mapOptions);

                $('#canvas').show();
            }
        });
    </script>
</head>

<body>
    <a href="#box" id="link">Open modal <a/>

    <div style='display:none'>
        <div id='box' style='height: 300px; width: 500px;' >
            <div id="canvas" style="height: 100%; width: 100%;"></div>
        </div>
    </div>
</body>

</html>

编辑：这是在谷歌铬测试。如果我调整窗口大小，则可以正确呈现地图

Answer 1

您必须触发'调整大小'地图事件。

var map = new google.maps.Map(document.getElementById("canvas"), mapOptions);

google.maps.event.trigger(map, 'resize', function () {
    // your callback content
});

Google地图无法在模态窗口中正确呈现

1 个答案: