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>Da sottolineare i parametri passati al metodo LoadMap.
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>
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.
0 commenti:
Post a Comment