#google-maps #openlayers
#google-карты #openlayers
Вопрос:
При попытке создать карту 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.3amp;amp;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>
Ответ №1:
Как в Chrome 11.x, так и в Chrome 13.x это работает так, как ожидалось.
В FireFox 4 действительно изображения не отображаются. Я получаю сообщение 'Helaas hebben we hier geen beelden van ' , которое означает что-то вроде Unfortunately we don't have any imagery of this .
Есть 2 полноэкранных примера для OpenLayers:
- http://openlayers.org/dev/examples/fullScreen.html
- http://openlayers.org/dev/examples/fullScreen2.html
Возможно, вы можете использовать их в качестве отправной точки и добавить слои Google, чтобы посмотреть, имеет ли это какое-либо значение.
В качестве альтернативы, вы могли бы попробовать начать с примера Google Maps V3 и сделать его полноэкранным. Это позволяет переключаться между 4 базовыми слоями Google Maps, аналогично тому, что вы пытаетесь сделать.
В данный момент у меня нет времени пробовать это самостоятельно, но я надеюсь, что это поможет вам найти решение вашей проблемы.
Комментарии:
1. Спасибо за ваше время, Ваутер. Мне удалось заставить мой пример работать.
2. Извините. Случайно нажал Enter. 🙂 Вот что я сделал: я изменил ссылку на OpenLayers.js из openlayers.org/api/OpenLayers.js в openlayers.org/dev/OpenLayers.js . Т.е. я перешел со стабильной версии на версию для разработки. Так что, по-видимому, это ошибка (я просто не нашел ее в bugtracker), и это исправлено в OpenLayers разработчика. Думаю, тогда мне придется переключиться на это… Еще раз спасибо. 🙂