Contrôle d'évènements 'click'

Cet exemple est propulsé par

Si vous suivez la présentation de la librairie GMaps dans l'ordre du site, vous devez déjà avoir pris connaissance de la page #143 présentant les "Listeners d'évènements" qui permettent l'interception d'évènements et l'ajout éventuel de fonctionnalités définies.

Cette page présente des exemples d'utilisation, d'interceptions de l'évènement "click" au sein d'une carte GMaps.


#00 :: Création à la volée de marqueurs sur une carte GMaps #01 :: Création à la volée de marqueurs sur une carte GMaps (custom)

Création à la volée de marqueurs sur une carte GMaps

Ce premier exemple vous permet de créer des marqueurs à la volée sur une carte GMaps.
Ces marqueurs peuvent être supprimés par un click.

L'exemple est testable ci après (ndr : carte non déplaçable) :

Utilisation de l'exemple #00

ZONE DE CHARGEMENT DE LA CARTE GMAPS

Le code source de cet exemple est recopié ci après avec dans l'ordre :

• le code javascript de création de la carte GMaps et de création de l'interception d'évènement click sur la carte.

// code utilisé pour la création de la fenêtre // et de la fonctionnalité de création/suppression // de marqueurs à la volée if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_0")); map.disableDragging(); map.setCenter(new GLatLng(48.856558, 2.350966), 13); /* création d'interception d'évènement "click" */ GEvent.addListener(map, "click", function(marker, point) { // si un marqueur existe on le supprime if (marker) { map.removeOverlay(marker); } // s'il n'existe pas on le crée else { map.addOverlay(new GMarker(point)); } }); }

Création à la volée de marqueurs sur une carte GMaps (custom)

Il peut être intéressant de travailler à partir des marqueurs que l'on créé ou que l'on supprime sur une carte.
Cet exemple vous présente une petite mise en forme intéressante du code de l'exemple #00 de cette page, qui permet de créer un log des actions effectuées en termes de click (ndr : création de marqueurs) et de suppressions de marqueurs sur la carte GMaps chargée.
L'exemple permet également de conserver les coordonnées du dernier point ajouté et du dernier point supprimé.

L'exemple est testable ci après :

Utilisation de l'exemple #01

ZONE DE CHARGEMENT DE LA CARTE GMAPS

Dernier marqueur ajouté :
 
Dernier marqueur supprimé :
 

Aucune action effectuée pour le moment ...

Le code source de l'exemple est recopié ci après avec dans l'ordre :

• le code javascript permettant de créer/charger la carte GMaps et de créer l'interception d'évènement "click" avec logging des actions.
• le code des éléments HTML utilisés dans l'exemple (ndr : zones de logs et bouton d'action).

// code utilisé pour la création de la fenêtre // et de la fonctionnalité de création/suppression // de marqueurs à la volée avec création d'un log // des actions et des derniers points ajoutés/supprimés if (GBrowserIsCompatible()) { var map1 = new GMap2(document.getElementById("map_1")); map1.disableDragging(); map1.setCenter(new GLatLng(48.856558, 2.350966), 13); /* création d'interception d'évènement "click" */ GEvent.addListener(map1, "click", function(marker, point) { // si un marqueur existe on le supprime if (marker) { // on récupère le point auquel est accroché le marqueur var pt = marker.getPoint(); var lat = pt.lat(); var long = pt.lng(); //alert(lat);alert(long); map1.removeOverlay(marker); $('log_0').innerHTML += "-- Suppression du marqueur ( "+lat+" , "+long+" ) de la carte.<br/>"; $('lastSupprLat').value = lat; $('lastSupprLong').value = long; } // s'il n'existe pas on le crée else { var newMarker = new GMarker(point); map1.addOverlay(newMarker); // on travaille directement à partir du point reçu var lat = point.lat(); var long = point.lng(); //alert(lat);alert(long); $('log_0').innerHTML += "-- Ajout du marqueur ( "+lat+" , "+long+" ) sur la carte.<br/>"; $('lastAddLat').value = lat; $('lastAddLong').value = long; } }); }

: 27/01/2007 16:21:56 | : Google, Maps, GMaps, Listener, Evènements, Click, GMap2.addListener(), addListener, cartes, cartographie, géolocalisation, marqueurs,

Aucun commentaire enregistré