02 nov 2008


Introduction


Il est possible à l'instar de l'API Google Maps de créer des marqueurs sur la carte et gérer des événements avec cette API.

Initialisation


Reprendre le globe du deuxième tutoriel.

Processus


Ajouter le contrôle de la navigation - en mode automatique :

ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);

Créer et paramétrer une vue :

var camera = ge.createLookAt('');
camera.set(43.6,1.44949866510018,2860,ge.ALTITUDE_RELATIVE_TO_GROUND,190,75,10000);
ge.getView().setAbstractView(camera);

Définir des icônes personnalisées - par défaut et au survol de la souris - pour les marqueurs :

map = ge.createStyleMap('styleMap');

normal = ge.createIcon('');
normal.setHref('http://maps.google.com/mapfiles/kml/shapes/triangle.png');
iconNormal = ge.createStyle('styleIconNormal');
iconNormal.getIconStyle().setIcon(normal);

highlight = ge.createIcon('');
highlight.setHref('http://maps.google.com/mapfiles/kml/shapes/square.png');
iconHighlight = ge.createStyle('styleIconHighlight');
iconHighlight.getIconStyle().setIcon(highlight);

map.setNormalStyleUrl('#styleIconNormal');
map.setHighlightStyleUrl('#styleIconHighlight');

Définir les marqueurs :

var mirail = ge.createPlacemark('');

var mirail_point = ge.createPoint('');
mirail_point.setLatitude(43.57825178577821);
mirail_point.setLongitude(1.40247810866353);
mirail.setName('Université Toulouse Le Mirail');
mirail.setGeometry(mirail_point);

Affecter les icônes personnalisées aux marqueurs :

mirail.setStyleSelector(null);
mirail.setStyleUrl('#styleMap');

Créer un événement lors d'un clic sur un marqueur - ici l'ouverture d'une infobulle contenant une image cliquable :

google.earth.addEventListener(mirail, "click", function(event) {
event.preventDefault();
var balloon = ge.createHtmlDivBalloon('');
balloon.setFeature(mirail);
var div = document.createElement('DIV');
div.innerHTML = '';
balloon.setContentDiv(div);
ge.setBalloon(balloon);
});


Code complet






[Google Earth] 4. Marqueurs et événements






Démonstration