2
22 aoû 2008


attention_light.jpgL'API Google Maps v2 est dépréciée depuis le 19 mai 2010.

Introduction


Les options sont parfois nécessaires pour personnaliser les affichages. Ici nous verrons comment ajouter des options aux polylignes pour simuler les vols d'une compagnie aérienne.

Initialisation


Pour ce tutoriel, nous partirons de la carte définie dans le second tutoriel et alimenterons la fonction initialize().

Création des points


Tout d'abord, définissons les villes :
var paris = new GLatLng(48.83993649400669,2.394869685885226);
Puis les icônes - une image est définie par son pictogramme ainsi que par son ombre et un placement en pixel par rapport à sa taille :

var icon1 = new GIcon();
icon1.image = "http://localhost/geotribu/icons/marker/green-dot.png";
icon1.shadow = "http://localhost/geotribu/icons/marker/shadow-dot.png";
icon1.iconSize = new GSize(32,32);
icon1.shadowSize = new GSize(49,32);
icon1.iconAnchor = new GPoint(16,32);
icon1.infoWindowAnchor = new GPoint(16,16);

Puis les marqueurs :

var marker2 = new GMarker(paris,icon1);


Création des vols


Pour créer les polylignes, il faut définir le vol :

var vol1 = [paris,new_york];

puis les options des polylignes - notamment l'option 'geodesic' pour suivre la courbure de la Terre :

var polyOptions = {geodesic: true};

et enfin les polylignes - couleur en héxadécimal #RRGGBB, largeur en pixel, opacité entre 0 et 1 - pour les options :

var poly1 = new GPolyline(vol1, "#ff0000", 2.5, 0.5, polyOptions);


Affichage des marqueurs et des polylignes


Enfin nous affichons les marqueurs et les polylignes sur la carte grâce à la méthode addOverlay :

map.addOverlay(poly1);
map.addOverlay(marker1)


Code complet






<br /> [Google Maps] 5. Polylignes (suite) - La Terre n'est pas plate ...<br />






Démonstration