OpenLayers：添加多个 Google 图层会导致地图调整大小后出现白屏
在尝试创建可动态填充整个页面的 OpenLayers 地图时，我遇到了问题。当我最小化然后最大化浏览器窗口后，地图变成空白。实际上，在任何窗口大小调整后都可能发生这种情况，但最小化/最大化每次都能解决问题。我使用 Firefox 4，但在所有其他浏览器中也会出现同样的错误。
经过一番实验后，我发现只有当我向地图添加多个 Google 图层时才会发生这种情况。仅 GoogleStreets 就可以完美运行； GoogleStreets + GoogleHybrid（或任何其他组合）会导致白屏。
有趣的是，如果我在调整窗口大小之前在图层之间切换，一切都会正常工作。
我在这里做错了什么吗？检查下面的代码（它可以在任何本地计算机上运行，所有库都来自 CDN）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mappa Mundi</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css" type="text/css"/>
<link rel="stylesheet" href="http://openlayers.org/api/theme/default/google.css" type="text/css"/>
<script src="http://maps.google.com/maps/api/js?v=3.3&sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<style type="text/css">
body {
font-size: 0.75em; font-family: Verdana;
margin: 0; padding: 0;
}
.b-map-openlayers {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map-openlayers" class="b-map-openlayers"></div>
<script type="text/javascript">
/*<![CDATA[*/
MapTest = function(cfg)
{
var self = this;
var i;
self.$mapContainer = $('#'+cfg.containerId);
self.updateContainerSize();
// Creating map
self.map = new OpenLayers.Map(cfg.containerId, {
controls:[]
});
// Handle window resize event
$(window).bind('resize', self, self.updateMapSize );
var gmap = new OpenLayers.Layer.Google("Google: Streets", {
numZoomLevels: 20,
sphericalMercator: true
});
var ghyb = new OpenLayers.Layer.Google("Google Hybrid", {
type: google.maps.MapTypeId.HYBRID,
numZoomLevels: 20,
sphericalMercator: true
});
// !!! This is the source of the problem. Remove ghyb - and everything's fine
self.map.addLayers([gmap, ghyb]);
self.map.setCenter( new OpenLayers.LonLat(0, 0), 5 );
self.map.addControl(new OpenLayers.Control.LayerSwitcher({roundedCornerColor: '#3f3f3f'}));
self.map.addControl(new OpenLayers.Control.DragPan());
self.map.addControl(new OpenLayers.Control.PanZoomBar());
self.map.addControl(new OpenLayers.Control.Navigation());
};
MapTest.prototype =
{
updateContainerSize: function()
{
var self = this;
var mapHeight = $(window).height();
var mapWidth = $(window).width();
self.$mapContainer.height(mapHeight);
self.$mapContainer.width(mapWidth);
},
updateMapSize: function(event)
{
var self = event.data;
self.updateContainerSize();
self.map.updateSize();
}
};
$(document).ready(function() {
var mapTest = new MapTest({
containerId: 'map-openlayers'
});
});
/*]]>*/
</script>
</body>
</html>
While trying to create an OpenLayers map which would dynamically fill whole page, I run into a problem. Ater I minimize and then maximize browser window the map becomes blank. Actually, it can happen after any window resize, but minimizing/maximizing does the trick every time. I use Firefox 4, but same bug occurs in all other browsers.
After a bit of experimentation I found out that this only happens if I add more than one Google Layer to the map. GoogleStreets alone work perfectly; GoogleStreets + GoogleHybrid (or any other pair) results in white screen.
Interestingly, if I switch betweeen layers before resizing window, everything works normally.
Am I doing something wrong here? Check my code below (it can be run on any local machine, all libraries come from CDN).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mappa Mundi</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css" type="text/css"/>
<link rel="stylesheet" href="http://openlayers.org/api/theme/default/google.css" type="text/css"/>
<script src="http://maps.google.com/maps/api/js?v=3.3&sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<style type="text/css">
body {
font-size: 0.75em; font-family: Verdana;
margin: 0; padding: 0;
}
.b-map-openlayers {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map-openlayers" class="b-map-openlayers"></div>
<script type="text/javascript">
/*<![CDATA[*/
MapTest = function(cfg)
{
var self = this;
var i;
self.$mapContainer = $('#'+cfg.containerId);
self.updateContainerSize();
// Creating map
self.map = new OpenLayers.Map(cfg.containerId, {
controls:[]
});
// Handle window resize event
$(window).bind('resize', self, self.updateMapSize );
var gmap = new OpenLayers.Layer.Google("Google: Streets", {
numZoomLevels: 20,
sphericalMercator: true
});
var ghyb = new OpenLayers.Layer.Google("Google Hybrid", {
type: google.maps.MapTypeId.HYBRID,
numZoomLevels: 20,
sphericalMercator: true
});
// !!! This is the source of the problem. Remove ghyb - and everything's fine
self.map.addLayers([gmap, ghyb]);
self.map.setCenter( new OpenLayers.LonLat(0, 0), 5 );
self.map.addControl(new OpenLayers.Control.LayerSwitcher({roundedCornerColor: '#3f3f3f'}));
self.map.addControl(new OpenLayers.Control.DragPan());
self.map.addControl(new OpenLayers.Control.PanZoomBar());
self.map.addControl(new OpenLayers.Control.Navigation());
};
MapTest.prototype =
{
updateContainerSize: function()
{
var self = this;
var mapHeight = $(window).height();
var mapWidth = $(window).width();
self.$mapContainer.height(mapHeight);
self.$mapContainer.width(mapWidth);
},
updateMapSize: function(event)
{
var self = event.data;
self.updateContainerSize();
self.map.updateSize();
}
};
$(document).ready(function() {
var mapTest = new MapTest({
containerId: 'map-openlayers'
});
});
/*]]>*/
</script>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在 Chrome 11.x 和 Chrome 13.x 中，它都能按预期工作。
在 FireFox 4 中确实无法显示图像。我收到一条消息
'Helaas hebben we hier geen beelden van '，其含义类似于不幸的是我们没有任何相关图像。OpenLayers 有 2 个全屏示例：
也许您可以使用这些作为起点，并添加 Google 图层，看看这是否有任何区别。
或者，您可以尝试从 Google Maps V3 示例开始，并将其设置为全屏显示。它可以让您在 4 个谷歌地图基础层之间切换，类似于您想要做的事情。
我现在没有时间亲自尝试这些事情，但我希望这可以帮助您找到问题的解决方案。
In both Chrome 11.x and Chrome 13.x it works as expected.
In FireFox 4 indeed the images don't show. I get a message
'Helaas hebben we hier geen beelden van ', which means something likeUnfortunately we don't have any imagery of this.There are 2 fullscreen examples for OpenLayers:
Maybe you can use those as a starting point, and add the Google layers, to see if that makes any difference.
Alternatively, you could try to start from the Google Maps V3 example, and make that one fullscreen. It lets you switch between 4 google maps base layers, similar to what you're trying to do.
I don't have the time to try these things myself at this moment, but I hope this helps you to find a solution to your problem.