Beim Versuch, eine OpenLayers-Karte zu erstellen, die dynamisch die ganze Seite ausfüllt, bin ich auf ein Problem gestoßen. Wenn ich das Browserfenster minimiere und dann maximiere, wird die Karte leer. Eigentlich kann das nach jeder Größenänderung des Fensters passieren, aber das Minimieren/Maximieren bringt jedes Mal den gewünschten Erfolg. Ich verwende Firefox 4, aber derselbe Fehler tritt auch in allen anderen Browsern auf.
Nach einigem Experimentieren habe ich herausgefunden, dass dies nur passiert, wenn ich der Karte mehr als einen Google Layer hinzufüge. GoogleStreets allein funktionieren perfekt; GoogleStreets + GoogleHybrid (oder jedes andere Paar) führt zu einem weißen Bildschirm.
Interessanterweise funktioniert alles normal, wenn ich vor der Größenänderung des Fensters zwischen den Ebenen wechsle.
Mache ich hier etwas falsch? Prüfen Sie meinen Code unten (es kann auf jedem lokalen Rechner ausgeführt werden, alle Bibliotheken kommen von 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>
