Comment mettre à jour un contenu popup à partir de son marqueur?


11

J'ai créé un popup avec Leaflet en faisant ceci:

marker.bindPopup(content).openPopup();

Comment puis-je mettre à jour la contentvaleur par la suite?

Je suppose que pour le faire à partir du marqueur, quelque chose comme ceci:

marker.updatePopup(newContent);

Réponses:


9

Je suppose que vous voulez que le contenu soit modifié après qu'un événement se soit produit, comme le survol de la souris, le menu contextuel ou toute autre chose.

Pour ce faire, vous pouvez utiliser le code suivant:

//marker creation
var marker = L.marker([44.63, 22.65]).bindPopup('something').addTo(map);
marker.openPopup();

//changing the content on mouseover
marker.on('mouseover', function(){
    marker._popup.setContent('something else')
});

Comme vous pouvez le voir, vous pouvez accéder à la fenêtre contextuelle du marqueur souhaité à l'aide de la méthode marker._popup, puis utiliser la méthode setContent pour modifier le texte à l'intérieur.

Référence de la méthode popup.setContent

Voici un code sur Plunker qui le démontre: http://plnkr.co/edit/vjS495QPXiJpKalrNpvo?p=preview


J'ai trouvé que lors du survol de la souris, je devais faire: this.getPopup.setContent ('bla bla bla');
TheSteve0

15

_popupa un trait de soulignement devant pour indiquer qu'il s'agit d'une instance privée / membre et qu'il ne faut pas y accéder directement. L'API correcte est Layer.setPopupContent () . par exemple marker.setPopupContent(newContent);


3

Peut-être trop tard pour répondre, mais pour d'autres, je pense que la meilleure façon est ici

http://jsfiddle.net/cPTQF/

$('button').click(function() {
   // Update the contents of the popup
   $(popup._contentNode).html('The new content is much longer so the popup should update how it looks.');

   // Calling _updateLayout to the popup resizes to the new content
   popup._updateLayout();

   // Calling _updatePosition so the popup is centered.
   popup._updatePosition();
   return false;
});

Je sais que c'est vieux, mais il est apparu dans mes résultats de recherche Google, ce qui signifie que cela pourrait aussi bien pour d'autres ... Le problème avec cette méthode est que # 1 si la fenêtre contextuelle n'est pas actuellement ouverte, ce clic de bouton (ou autre vous vous liez à) ne fait rien. Deuxièmement, si vous réduisez la fenêtre contextuelle et cliquez à nouveau dessus, vous obtenez le contenu original, pas le nouveau contenu!
DR

1

Vous pouvez obtenir le contenu contextuel avec:

marker.getPopup().getContent();

Définissez le contenu avec:

marker.getPopup().setContent("123");
marker.getPopup().update();
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.