我在模态窗口中加载谷歌地图时遇到问题。基本上，当模式窗口打开时，我会加载 map ，但它不会完全渲染。
我提供了一个示例，以便您可以更好地理解该问题。有人知道如何解决这个问题吗？
<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>
编辑: 这是在谷歌浏览器上测试的。 如果我调整窗口大小， map 就会正确渲染
最佳答案
您必须触发“调整大小” map 事件。
var map = new google.maps.Map(document.getElementById("canvas"), mapOptions);
google.maps.event.trigger(map, 'resize', function () {
// your callback content
});
关于javascript - Google map 无法在模态窗口中正确呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14071855/