我正在使用 materializecss ，问题是 Google map 未在 Materialize 模式中加载。但除了模态之外，它工作正常。我做了我该做的一切。这个问题有什么解决办法吗？
更新:
I found the solution for my problem. Actually i was using multiple view in that modal and placed my map div back of one div using
ng-show. It causes my map to not display. But placing map div in front of all other div fixed my issue. :)
最佳答案
当模式出现时，它会调整其内容的大小以适应它。因此，您的 Google map 组件的大小发生了变化，因此只需刷新它即可。
只需在 <script> 中添加以下代码即可标签。
$('.modal-trigger').leanModal({
ready: function() {
var map = document.getElementById("googleMap");
google.maps.event.trigger(map, 'resize');
}
});
应该可以了:)
===编辑===
我添加了一个示例，我认为可能对您有帮助。此示例在页面加载时初始化 map 对象，并在模型中使用相同的对象。
<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>
关于angularjs - 如何在 Materialise Modal 中加载 Google map ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35698042/