如何在 Materialise Modal 中加载谷歌地图？答案

【问题标题】：How to load Google Map in Materialize Modal?如何在 Materialise Modal 中加载谷歌地图？
【发布时间】：2016-02-29 11:09:50
【问题描述】：

我正在使用materializecss，问题是谷歌地图没有在物化模式中加载。但除了模态之外，它的工作正常。我做了我必须做的一切。这个问题有什么解决办法吗？

更新：

我找到了解决问题的方法。实际上我正在使用多个在该模式中查看并将我的地图 div 放在一个 div 后面 ng-show。它导致我的地图不显示。但是将地图 div 放入所有其他 div 的前面解决了我的问题。 :)

【问题讨论】：

标签： angularjs node.js materialize

【解决方案1】：

当模态框出现时，它会重新调整其内容的大小以适应它。因此，您的 Google 地图组件的大小已更改，因此只需要刷新即可。

只需在<script> 标记中添加以下代码即可。

$('.modal-trigger').leanModal({
    ready: function() {
        var map = document.getElementById("googleMap");
        google.maps.event.trigger(map, 'resize');
    }
});

应该这样做:)

=== 编辑 ===

我添加了一个我认为可能对您有帮助的示例。此示例在页面加载时初始化地图对象，并在模型中使用相同的对象。

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <script src="js/jquery-2.2.0.js" type="text/javascript"></script>
    <script src="js/materialize.js" type="text/javascript"></script>
    <script src="http://maps.googleapis.com/maps/api/js"></script>

    <script>
        function initialize() {
            var mapProp = {
                center: new google.maps.LatLng(51.508742, -0.120850),
                zoom: 5,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
        }
        google.maps.event.addDomListener(window, 'load', initialize);

        $(document).ready(function () {
            $('.modal-trigger').leanModal({
                ready: function () {
                    var map = document.getElementById("googleMap");
                    google.maps.event.trigger(map, 'resize');
                }
            });
        });
    </script>

</head>
<body>
    <a href="#mapmodel" class="modal-trigger blue z-depth-1 waves-effect waves-light btn-floating">
        <i class="red material-icons">location_on</i>
    </a> 

    <div id="mapmodel" class="modal modal-fixed-footer">
        <div class="modal-content">
            <h4>Test</h4>
            <div id="googleMap" style="width:500px;height:380px;"></div>
        </div>
        <div class="modal-footer">
            <a href="#" class="red modal-action modal-close waves-effect waves-green btn-flat">Got it</a>
        </div>
    </div>
</body>
</html>

【讨论】：

其实我找到了解决方案。但问题没有完全解决。当我打开一个模式并且该页面中没有地图时意味着地图正在以模式加载。但如果该页面中已经存在地图，则表示地图不会以模式加载。仅显示带有缩放控制的灰色背景。如何解决这个问题？？？？
在body部分添加一个map div，然后打开modal查看。地图将无法以模式正确显示。这是我的问题。
等待解决方案。请帮我解决这个问题。 :(@维杰
您能否发送导致问题的确切代码？我尝试了你说的方式，它在我的情况下工作..
老兄，如果你把你的代码发给我可以检查一下就好了。