Отображение карты

Доброго времени суток! Подскажите, пожалуйста, почему когда я НЕ задаю размеры div’a (в котором у меня должна отображаться карта) НЕ отображается карта, а если устанавливаю заранее width и height div’a - то отображается? Заранее огромное спасибо!

Забыли название фреймворка.

Я пишу без использования какого либо определенного фреймворка (если я правильно понял, что вы имели ввиду).

На компе стоят Microsoft .NET Framework 2.0 Service Pack 2, Microsoft .NET Framework 3.0 Service Pack 2, Microsoft .NET Framework 3.5 SP1.

В таком случае это полностью твой кривой код :slight_smile: Посмотри как сделано в leaflet или openlayer.

Извините, а не могли бы вы написать по пунктам что нужно прописать чтобы инициализировать карту. Самый минимум, главное - чтобы создалась правильно.

На всякий случай напишу сюда мой код:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Map</title>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
function init(){
var map = new OpenLayers.Map('bmap');

	map.addControl(
		new OpenLayers.Control.MousePosition({
			prefix: 'coordinates: ',
			separator: ' | ',
			numDigits: 6,
			emptyString: 'Mouse is not over map.',
			displayProjection: new OpenLayers.Projection("EPSG:4326")
		})
	);


			
	var mapnik = new OpenLayers.Layer.OSM();
	var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
	var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
	var position       = new OpenLayers.LonLat(38.104303,55.604742).transform( fromProjection, toProjection);
	var zoom           = 17; 
	map.addLayer(mapnik);
	map.setCenter(position, zoom );
			
		
	map.events.register("mousemove", map, function(e) {
		var position = this.events.getMousePosition(e);
		OpenLayers.Util.getElement("coords").innerHTML = position;
	});
	
	var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
	renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
			
			
	var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
		styleMap: new OpenLayers.StyleMap({'default':{
			//strokeColor: "#00FF00",
				strokeOpacity: 1,
				strokeWidth: 1.5,
			//fillColor: "#FF5500",
				fillOpacity: 0.5,
				pointRadius: 6,
				pointerEvents: "visiblePainted",
			// label with \n linebreaks
			//label : "name: ${name}\n\nage: ${age}",
                    
				fontColor: "${favColor}",
				fontSize: "12px",
				fontFamily: "Courier New, monospace",
				fontWeight: "bold",
				labelAlign: "${align}",
				labelXOffset: "${xOffset}",
				labelYOffset: "${yOffset}",
				labelOutlineColor: "white",
				labelOutlineWidth: 3
			}
		}),
		renderers: renderer
	});
}

</script>
</head>

<body>
<script>
window.onload = init;
</script>
<div id="wrapper">

	<div id="header">Hello!</div><!-- #header-->

	<div id="content">
		<table border="0" id="tablemap">
		<tr>
		<td>
			<div id="bmap"></div>
		</td>
		</tr>
		</table>
	</div><!-- #content-->

</div><!-- #wrapper -->

<div id="footer">
	
</div><!-- #footer -->

</body>
</html>

Вот так карта не отображается, а когда я вместо

<div id="bmap"></div>

Пропишу это:

<div id="bmap" style="width:500px; height:768px"></div>

то отображается. Проблема в инициализации - это ясно, но я не могу найти в чем именно… Помогите пожалуйста :slight_smile:

Понял не правильно, если в названии нет слова framework это не отменяет его сути. В данном случае используешь OpenLayers.
Ну и попробуй такой стиль:

width: 100%; height: 100%;

Попробовал, все равно не отображается. :frowning:

Чтобы width; height 100% правильно работали, должно быть окружение которое это позволяет делать, читайте теорию css :slight_smile:

Ну так Openlayers не знает какого размера вы хотите карту - вот и не отображает. Ваши мысли он читать пока не научился. :slight_smile:

Да, framework в данном случае - OpenLayers.
В чём проблема - вы уже сами поняли: в том, что размер контейнера карты должен быть задан в явном виде.
Если вы владеете javascript или css, то вам не составит труда сделать так, чтобы он был задан. Но раз вы не решили проблему сами, значит не владеете.
Если не владеете - есть два пути: изучить это самостоятельно или чтобы за вас проект сделал кто-то другой, кто это умеет (на добровольной или коммерческой основе). А “пошаговые инструкции” вам явно не помогут - аналогичных проблем будет еще сотни, так что, вы с каждой будете по форумам побираться, чтобы за вас ее кто-то решил? Так дела не делаются…

width емним можно не задавать, по умолчанию будет на всю доступную ширину. Чтобы сработал height в процентах надо убедиться что он нормально задан у всех вышестоящих элементов. Проверьте что у вас body занимает 100 высоты (по умолчанию это не так).

Ну например вот здесь же работает без задания размера в явном виде: http://www.openstreetmap.org/

Я сделал с помощью js, чтобы перед загрузкой страницы узнавалось какого размера окно браузера у пользователя и делался div такого размера. Так работает, но когда я загрузил страницу и потом меняю размер окна - размер div’a уже не меняется. Неужели придется использовать еще и ajax чтобы размер менять так сказать в режиме “онлайн”, и вообще не уверен я что карта поменяет размер без обновления страницы с такой реализацией. Поэтому я и решил спросить почему на некоторых сайтах используются эти карты и размеры контейнера под них не заданы в явном виде - а всё равно карта грузится на весь экран. Вот например как тут: http://toolserver.org/~osm/locale/__all.html

Spelot, leaflet/openlayers тут ни при чем. Если высота для дива не указана - то она нулевая и вашу карту просто не видно. Можете убрать скрипт инициализации карты, задать ядовитый цвет бэкгроунда и убедиться что его не видно на страничке. На openstreetmap.org высота дива с картой указывается явно, через яваскрипт.

Если вы добъетесь чтобы див имел нужные размеры без карты, то и с картой он будет иметь нужные размеры.

Понял, спасибо. Сегодня вечером попробую сделать также.

Добился чтобы див был на всю ширину, ну а высоту задал в явном виде. Добавил карту - заработало!! Спасибо огромное!

Вы просто вбейте в гугле header/footer css example или посмотрите как заверстывается страничка нужного вам вида. Соберите у себя такую же, без карты, просто выделив цветом нужный див. Потом добавите ему id и скрипт инициализации карты.

При чем тут ajax, вы вот повесили установку размеров окна на загрузку страницы, но можно ведь с тем же успехом сделать это и на событие изменения окна.