Suite

Rendre le panneau d'informations cliquable dans Leaflet ?


Comment permet-on de cliquer, faire glisser, copier le texte qui apparaît dans le panneau d'informations de brochure.js ?

Dans une application de brochure similaire à l'exemple choroplèthe, je remplis le panneau d'informations en cliquant au lieu de passer la souris. Je dois permettre à l'utilisateur de sélectionner et de copier le texte présent sur le panneau. À l'heure actuelle, les hyperliens que je crée sur le panneau sont cliquables. Mais le texte dans le panneau ne peut pas être sélectionné… le comportement de la souris est comme s'il était sur la carte uniquement… le panneau est un "fantôme" pour la souris à moins qu'un lien hypertexte n'apparaisse. Lien vers le projet.


Lors de la création du div, assurez-vous d'y ajouter un écouteur d'événement, qui arrête de propager l'événement sur la carte. Méthode plus simple :

info.onAdd = function (map) { this._div = L.DomUtil.create('div', 'info'); // crée un div avec une classe "info" this._div.onmousedown = function(evt) {evt.stopPropagation(}); this.update(); renvoie this._div; } ;

Manière plus sophistiquée:

info.onAdd = function (map) { this._div = L.DomUtil.create('div', 'info'); // crée un div avec une classe "info" this._div.addEventListener('mousedown', function(evt) {evt.stopPropagation()} ); this.update(); renvoie this._div; } ;

De cette façon, la carte n'obtiendra pas lesouris vers le basévénement, ne fera donc pas panoramique de la vue, donc le contenu du panneau d'informations devient sélectionnable.

Notez que j'ai ajouté manuellement l'identifiantsau div du panneau d'informations juste pour l'exemple.


Voir la vidéo: Leaflet. Работа с плагинами (Octobre 2021).