Webjax.eu :: Création d'un outil de zoom

Visualisation d'une page Webjax

Création d'un outil de zoom

Ce widget est propulsé par Virtual Earth Interactive SDK .

Si vous souhaitez reproduire l'exemple en local, faites bien attention à inclure l'en-tête Javascript permettant de charger la librairie Javascript MapControl de Microsoft sinon le chargement de la carte ne fonctionnera pas.

Mise en place d'un outil de zooming

L'exemple est découpé selon le schéma suivant :

Code Javascript de lancement/affichage de la carte

Code XHTML/CSS définissant la box/zone pour la carte

L'exemple nécessite d'avoir inclut la librairie Javascript MapControl de Microsoft dans le corps (X)HTML/CSS dans lequel vous souhaitez présenter la carte.

Affichage d'une carte (simple)

Niveau de zoom :

var map = null; function GetMap() { map = new VEMap('myMap'); map.LoadMap(); } function DoZoomIn(c) { map.ZoomIn(); } function DoZoomOut() { map.ZoomOut(); } function DoZoom() { var zoom = document.getElementById('zoomLevel').value; map.SetZoomLevel(zoom); }
<div id='myMap' style="position:relative; width:400px; height:400px;"></div> <input type='button' value='Zoom In (zoom+)' onclick='DoZoomIn();' /> <input type='button' value='Zoom Out (zoom-)' onclick='DoZoomOut();'/> <br/> Niveau de zoom : <input id='zoomLevel' type='text' style='width:20px;' value='10' maxlength="2" /><input type='button' value='Modifier le niveau de zoom' onclick='DoZoom();' /> <br/><br/> <input type="button" name="act0" id="act0" onClick="GetMap();this.disabled=true;return false;" value="créer la carte VirtualEarth 3D" />

ico time

: 26/09/2007 20:35:34 | ico tag

ico tag

: Virtual, Earth, Zoom, zoom, functionnalities, zooming, a, map, Carte, simple, script, exemple, Microsoft, microsoft, cartographie, webbased, mappoint, map, point, POI, po,

ico com

Aucun commentaire enregistré