Jquery google map plugin, ajout d’écouteurs d’événements

Quelqu’un peut-il expliquer la signification de l’extrait de code suivant ( jQuery.fn[name] ) trouvé dans le plugin google jquery.ui.map :

 jQuery.each(('click mousedown rightclick dblclick mouseover mouseout drag dragend').split(' '), function(i, name) { jQuery.fn[name] = function(a, b) { return this.addEventListener(name, a, b); }; });

Et aussi comment nous pourrions lier une fonction de rappel à l’événement click sur un object de la carte, j’ai essayé ce qui suit, mais l’ event ne possède pas l’atsortingbut latLng :

 $('#map_canvas').gmap().click(function(event) { alert(event.latLng); });

Merci d’avance.

Cet extrait de code remplace certaines des méthodes jQuery afin qu’il puisse être utilisé sur certains objects Google Maps. Par exemple

  var map = $('#map_canvas').gmap('get', 'map') $(map).click(function() { var self = this; // this is the map object }); $('#map_canvas').gmap('addMarker', { ... }).click(function() { var self = this; // this refers to the marker object }).hover(function() { var self = this; // this refers to the marker object });

Si vous devez lier d’autres événements tels que zoom_changed, il suffit de

 var map = $('#map_canvas').gmap('get', 'map'); $(map).addEventListener('zoom_changed', function() { });

Vous avez répondu à votre propre question 🙂 Si vous souhaitez lier des événements à votre carte Google, vous devez utiliser this.addEventListener(name, a, b); (C’est en fait le bit de code qui vous permet d’exécuter des fonctions sur certains événements. Voir ci-dessous.)

Exemple:

  google.maps.event.addListener(my_map_object, 'click', function() { my_map_object.setZoom(8); alert("I've just zoomed by clicking the map!"); });

Vous pouvez append des événements à l’object de la carte ou tout autre marqueur que vous avez placé sur la carte.

Voir https://developers.google.com/maps/documentation/javascript/events pour une explication complète. L’API de Google Maps a de bons exemples d’utilisation, vous pouvez apprendre beaucoup d’eux 🙂

 google.maps.event.addListener(marker, 'mouseover', function() { $('.hover_div').html(''+marker.hover + marker.title +'').show(); });

  google.maps.event.addListener(marker, 'click', function() { window.open( marker.url, '_blank' // <- This is what makes it open in a new window. );

Je n'utiliserais pas de plugin car cela limite votre travail. Essayez de lire comment créer une carte vous-même.

J’ai constaté que le fait de voler tous les événements de la page et de les réaffecter à la carte empêche les événements delegates de fonctionner. Par exemple, si vous essayez de sortinggger() un clic sur un autre élément, cela ne fonctionne pas. Par exemple – Si la définition d’un écouteur d’événement on("click") fonctionne toujours, elle n’écoutera plus un clic déclenché par programme.

J’ai modifié le code sur ma propre copie du fichier. Ici c’est au cas où quelqu’un serait intéressé. Cela change les “noms” de la fonction pour append “map” au début, et mettre en majuscule la première lettre de la méthode originale:

click() modifier mapClick , de faire dragend modifications vers mapDragend , etc.

 jQuery.each(('click rightclick dblclick mouseover mouseout drag dragend').split(' '), function (i, name) { jQuery.fn["map" + name[0].toUpperCase() + name.substr(1)] = function (a, b) { return this.addEventListener(name, a, b); } });