Hărţile MS Live: numerotarea marcatorilor


Astăzi am lucrat ore, multe, multe ore, pentru o webaplicaţie ce combină o bază de date MySQL cu hărţile oferite de Microsoft (Maps.Live.com). Am mai atins subiectul în trecut, acum un an: API/SDK pentru Live Maps, Cum folosim o hartă din Live Maps şi Cum creăm o hartă în Live Maps. De atunci nici nu am mai lucrat cu SDK-ul oferit de Microsoft (ajuns între timp la versiunea 6.2) dar astăzi l-am răsfoit pe îndelete şi am testat tot felul de lucruri. Concluzia: uimitor!!! Poţi crea webaplicaţii destul de uşor chiar în hartă (adică de acolo să iei eventual date şi tot acolo să afişezi rezultatele).

Nu aş dori să sar la ceva prea complicat aşa că m-am gândit să vă pun mai jos un exemplu simpluţ, care se rezumă la a înfige patru „pioneze” în hartă. Veţi vedea însă că descrierea lor (puneţi mouse-ul deasupra) suportă HTML, aşa că putem pune chiar şi imagine (vedeţi Iaşiul). Să nu uit: demonstraţia o aveţi aici (click). Una dintre problemele cu care m-am confruntat astăzi a fost: cum să fac să numerotez marcatorii? Nu am descoperit singur ci de pe net, dar filosofie mare nu e: de fapt soluţia se reduce la CSS, afişând şi imagine şi text, suprapus. Codul nu e lung şi se explică singur… Voi căuta să revin cu o nouă versiune a lui care să mai adauge ceva complexitate.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Numerotare marcatoare pe harta Microsoft Live</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
<style type="text/css">
<!--
.pinStyle1{ position:relative; background:url('pin1.gif') no-repeat 0 0; height:30px; width:25px; top:-15px; color:#fff; text-align:center; font: bold 12px Arial; cursor: pointer;}
.pinStyle1 .text{ position: relative; top: 2px; }
 
.pinStyle2{ position:relative; background:url('pin2.gif') no-repeat 0 0; height:29px; width:25px; top:-14px; color:#fff; text-align:center; font: bold 12px Arial; cursor: pointer;}
.pinStyle2 .text{ position: relative; top: 5px; }
 
.pinStyle3{ position:relative; background:url('pin3.gif') no-repeat 0 0; height:29px; width:25px; top:-14px; color:#fff; text-align:center; font: bold 12px Arial; cursor: pointer;}
.pinStyle3 .text{ position: relative; top: 5px; }
 
.pinStyle4{ position:relative; background:url('pin4.gif') no-repeat 0 0; height:29px;  width:25px; top:-14px; color:#fff; text-align:center; font: bold 12px Arial; cursor: pointer;}
.pinStyle4 .text{ position: relative; top: 5px; }
 
.pinStyle5{ position:relative; background:url('pin5.gif') no-repeat 0 0; height:29px; width:25px; top:-14px; color:#fff; text-align:center; font: bold 12px Arial; cursor: pointer;}
.pinStyle5 .text{ position: relative; top: 5px; }
-->
</style>
<script type="text/javascript">
    var harta = null;
    var CentrulTarii = new VELatLong(45.817315, 25.037842);
    function IncarcaHarta(){
        harta = new VEMap('myMap');
        harta.HideDashboard();
        harta.LoadMap(CentrulTarii, 7, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);
        PuneLocalitati();
    }
    function PuneLocalitati(){
        punct_buc = new VELatLong(44.4342,26.102955);
        shape_buc = new VEShape(VEShapeType.Pushpin, punct_buc);
        shape_buc.SetTitle('Bucureşti');
        shape_buc.SetDescription('Aceasta este <strong>capitala României</strong>.');
        shape_buc.SetCustomIcon('<div class=pinStyle2><div class=text>1</div></div>');
        harta.AddShape(shape_buc);
        
        punct_tim = new VELatLong(45.753425,21.223275);
        shape_tim = new VEShape(VEShapeType.Pushpin, punct_tim);
        shape_tim.SetTitle('Timişoara');
        shape_tim.SetDescription('Un oraş <strong><font color=#cc0000>foarte occidental<font></strong>.');
        shape_tim.SetCustomIcon('<div class=pinStyle3><div class=text>2</div></div>');
        harta.AddShape(shape_tim);
        
        punct_clu = new VELatLong(46.770143,23.596885);
        shape_clu = new VEShape(VEShapeType.Pushpin, punct_clu);
        shape_clu.SetTitle('Cluj-Napoca');
        shape_clu.SetDescription('Oraşul meu de <em>adopţie</em>.');
        shape_clu.SetCustomIcon('<div class=pinStyle4><div class=text>3</div></div>');
        harta.AddShape(shape_clu);
        
        punct_ias = new VELatLong(47.137608,27.5556);
        shape_ias = new VEShape(VEShapeType.Pushpin, punct_ias);
        shape_ias.SetTitle('Iaşi');
        shape_ias.SetDescription('Şi o oprire la Iaşi şi cu o mică imagine.<br><img src=iasi.jpg>');
        shape_ias.SetCustomIcon('<div class=pinStyle5><div class=text>4</div></div>');
        harta.AddShape(shape_tim);
    }
</script>
</head>
<body onload="IncarcaHarta();">
    <div id='myMap' style="position:relative; width:800px; height:600px;"></div>
</body>
</html>

Apreciază articolul:

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

0 comentarii


Lasă un răspuns

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