Accueil

2. Ajoutons quelques contrôles

Ecrit par fabien le 2/11/2008.
| |



Introduction

Ce deuxième tutoriel reprend le globe défini dans le premier tutoriel en lui ajoutant des éléments de contrôle.

Initialisation

Reprendre le globe défini dans le premier tutoriel.

Processus

Ajouter quelques contrôles à la carte - navigation à la souris, contrôles de zoom et de directions, grille, carte générale et légende : 
ge.getOptions().setMouseNavigationEnabled(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
ge.getOptions().setGridVisibility(true);
ge.getOptions().setStatusBarVisibility(true);
ge.getOptions().setOverviewMapVisibility(true);
ge.getOptions().setScaleLegendVisibility(true);



Code complet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>[Google Earth] 2. Ajoutons quelques contr&ocirc;les</title>
    <script src="http://www.google.com/jsapi?key=ABQIAAAAPo34DyTbdo2RpVUvdvK1qxTVkAM76o12Ue_ZZqmwjROaqOyBLhQVBCYY9lnsLXH3mdZLo-PWW8Z1DQ"></script>
    <style type="text/css">
	  html { overflow:hidden; height:100%; } 
	  body { height:100%; margin:0; }
    </style>
    <link rel="icon" type="image/png" href="./favicon.png"/>
    <script>
      google.load("earth", "1");
      var ge = null;
 
      function init() {
        google.earth.createInstance("map3d", initCallback);
      }
 
      function initCallback(object) {
        ge = object;
        ge.getWindow().setVisibility(true);
        ge.getOptions().setMouseNavigationEnabled(true);
        ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
        ge.getOptions().setGridVisibility(true);
        ge.getOptions().setStatusBarVisibility(true);
        ge.getOptions().setOverviewMapVisibility(true);
        ge.getOptions().setScaleLegendVisibility(true);
      }
    </script>
  </head>
  <body onload='init()' id='body'>
    <div id='map3d_container' style='border: 0px solid silver; height: 100%; width: 100%;'>
      <div id='map3d' style='height: 100%;'></div>
    </div>
   </body>
</html>



Démonstration

Résultat pleine page


Remarques

L'ajout de contrôle et d'informations sur la carte se fait de manière très simple en utilisant les méthodes de l'API.
L'API est disponible à cette adresse : http://code.google.com/apis/earth/documentation/reference/index.html

Conclusion

Ajouter quelques options à la carte est très simple.
Maintenant que les options de contrôle et de navigation sont ajoutées à la carte, nous verrons par la suite comment ajouter des informations sur la carte.
L'utilisation des boutons de navigation est exactement la même que le logiciel Google Earth - vous ne serez pas perdu.


Auteur : Fabien - fabien.goblet [ at ] gmail.com






Retour en haut