个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
27
4
我正在使用 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/
27
4
0
我正在开发一个需要能够平均三个数字的 Facebook 应用程序。但是，它总是返回 0 作为答案。这是我的代码: $y = 100; $n = 250; $m = 300; $number = ($y
我只是无法弄清楚这一点，也找不到任何对我来说有意义的类似问题。我的问题:我从数据库中提取记录，并在我的网页上以每个面板 12 条的倍数显示它们。因此，我需要知道有多少个面板可以使用 JavaScrip
我是一名优秀的程序员,十分优秀！