Cum afişăm o hartă Microsoft pe toată pagina?


Lucrând zilele trecute din nou cu hărţile Microsoft m-am întrebat: cum pot face ca o hartă să acopere întreaga pagin? Desigur, când vrei să o încadrezi într-un design atunci o faci să zicem de 600 pixeli lăţime şi de 400 pixeli înălţime. Dar dacă vrei să umple toată pagina? Problema se reduce desigur la o altă întrebare: cum afli dimensiunea paginii? Prima soluţie spre care m-am îndreptat (şi de fapt singura :) ) a fost jQuery. Dacă încărcăm librăria jQuery (şi am luat-o direct de pe Google) atunci avem acces la $(window).width() şi $(window).height(), care ne spun lăţimea şi înălţimea paginii (adică exact cât încape în fereastra navigatorului).

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Harta mare</title>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body onload="AfiseazaHarta();" style=’margin:0; padding:0;’>
<script type="text/javascript">
$(document).ready(function(){
$(window).bind("resize", redimensionareFereastra);
function redimensionareFereastra(e) {
location.reload();
}
});
var harta = null;
function AfiseazaHarta(){
harta = new VEMap(‘hartaMea’);
harta.SetDashboardSize(VEDashboardSize.Small);
harta.LoadMap(new VELatLong(46, 25), 10 ,’h’ ,false);
harta.SetMapStyle(VEMapStyle.Road);
harta.ShowMiniMap(10,$(window).height()-160);
}
document.write(‘<div id="hartaMea" style="position:relative;width:’+
$(window).width()+’px;height:’+$(window).height()+’px;"></div>’);
</script>
</body>
</html>[/HTML]

Codul de mai sus îl puteţi vedea în acţiune aici. Încercaţi să schimbaţi dimensiunea ferestrei sau să apăsaţi F11: de fiecare dată harta va ocupa maximul din fereastră. Să vedem cum am realizat aceasta.

  • Liniile 11-16 spun navigatorului: când s-a făcut redimensionare reîncarcă pagina

  • Liniile 17-24 sunt liniile de creare a hărţii: observaţi că am plasat miniharta tot timpul în colţul stânga-jos (fără artificiul cu jQuery nu puteam să o poziţionăm decât fix – acum e dinamic, după dimensiunea ferestrei; acelaşi truc ne poate ajuta pentru a afişa dinamic o legendă, să zicem în colţul dreapta-jos)
  • Linia 25 scrie DIV-ul în care afişăm harta şi, observaţi, dimensiunile lui sunt chiar dimensiunile paginii (via jQuery, trăiască jQuery)

Ar mai fi important să spunem că am pus margin:0; padding:0; la tagul body ca să nu apară margini albe, ci să folosim 100% întregul „vizor” al navigatorului.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (1 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *