如何在物化模式中加载Google地图？
我正在使用materializecss ，问题是Google Map没有在实现模式中加载。 但除了模态，其工作正常。 我做了我必须做的一切。 任何解决这个问题？
更新：
我find了我的问题的解决scheme。 其实我在这个模式中使用多个视图，并使用
ng-show将我的地图div放回一个div。 它导致我的地图不显示。 但将地图div放在所有其他div前面解决了我的问题。 🙂
当模式显示时，它重新调整其内容以适应它。 因此，您的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>