Per caricare la mappa di default di Virtual Earth nella nostra pagina .aspx bastano pochissime righe di codice:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Pagina di test Virtual Earth</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5"></script>
<script>
var map = null;
function GetMap()
{
map = new VEMap( 'myMapDefault');
map.LoadMap();
}
</script>
</head>
<body onload="GetMap();">
<form id="form1" runat="server">
<div id="myMapDefault" style="position:absolute; width: 100%; height: 100%">
</div>
</form>
</body>
</html>
La mappa di default centrata sugli Stati Uniti viene caricata nel nostro div con id
myMapDefault.
Ma partiamo con ordine, come prima cosa è fondamentale inserire un tag
meta con attributo
charset impostato su
UTF-8, questo perchè avremo il giusto supporto di tutti i caratteri.
In seguito è necessario inserire una sezione di script in cui indicare l'url del
map control.
Infine sempre nella sezione di script si crea un nuovo oggetto
VEMap su cui richiamare il metodo
LoadMap il quale si occupa di caricare la mappa di default questo perchè non abbiamo specificato alcun parametro.
Questo è il risultato:

Per rendere il tutto più interessante ho aggiunto tre controlli:
<table border="1" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center"><b>Lista città :</b> <asp:DropDownList ID="ddlCity" runat="server" Width="200px">
<asp:ListItem Value="1.2903767630848437,103.85227918624878">Singapore</asp:ListItem>
<asp:ListItem Value="38.72535854643843,-9.15037751197815">Lisbona</asp:ListItem>
</asp:DropDownList><b>Zoom:</b>
<asp:DropDownList ID="ddlZoom" runat="server">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
<asp:ListItem>6</asp:ListItem>
<asp:ListItem>7</asp:ListItem>
<asp:ListItem Selected="True">8</asp:ListItem>
<asp:ListItem>9</asp:ListItem>
<asp:ListItem>10</asp:ListItem>
<asp:ListItem>11</asp:ListItem>
<asp:ListItem>12</asp:ListItem>
<asp:ListItem>13</asp:ListItem>
<asp:ListItem>14</asp:ListItem>
<asp:ListItem>15</asp:ListItem>
<asp:ListItem>16</asp:ListItem>
<asp:ListItem>17</asp:ListItem>
<asp:ListItem>18</asp:ListItem>
<asp:ListItem>19</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="btnView" runat="server" Text="Carica mappa" /></td>
</tr>
</table>
1)DropDownList con id
ddlCity che contiene la città di Lisbona e Singapore con i dati riguardanti le coordinate di latitudine/longitudine,
2)DropDownList con id
ddlZoom per effettuare lo zoom sulla mappa. Il range di valori validi vanno da 1 a 19. Il valore di default è 4.
3)Un button con id
btnView per caricare la mappa.

Lo scopo è appunto quello di caricare una mappa diversa da quella di default selezionando la città da una lista.
L'unica sezione da modificare è quella script:
<script>
var map = null;
function GetMap()
{
var latitudine = null;
var longitudine = null;
var itemCity = document.getElementById( 'ddlCity').value;
latitudine = itemCity.split(',')[0];
longitudine = itemCity.split(',')[1];
map = new VEMap( 'myMapDefault');
map.LoadMap( new VELatLong( latitudine, longitudine), document.getElementById('ddlZoom').value, 'r', false, VEMapMode.Mode2D);
}
</script>
Da sottolineare i parametri passati al metodo
LoadMap.
Il primo parametro è un nuovo oggetto di tipo
VELatLong che rappresenta il centro della mappa da visualizzare tramite le coordinate di latitudine/longitudine che recupero dal controllo
ddlCity.
Secondo parametro il livello di zoom.
Terzo parametro è una lettera che può essere:
1)
r per mappe stradali
2)
a per mappe satellitari
3)
h ibrida
Quarto parametro un booleano per indicare il lock o meno della mappa(significa che la mappa non sarà interattiva con valore
true), ed infine il quinto parametro la modalità di visualizzazione; tramite l'enumeratore
VEMapMode possiamo indicare una modalità di visualizzazione 2D o 3D.
Read More »»