マーカーからポップアップコンテンツを更新する方法は?


11

Leafletでポップアップを作成しました。

marker.bindPopup(content).openPopup();

content後で値を更新するにはどうすればよいですか?

私はこのようなマーカーからそれを行うと思います:

marker.updatePopup(newContent);

回答:


9

マウスオーバー、コンテキストメニューなど、何らかのイベントが発生した後にコンテンツを変更する必要があると思います。

そのためには、次のコードを使用できます。

//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')
});

ご覧のように、marker._popupメソッドを使用して目的のマーカーのポップアップにアクセスし、setContentメソッドを使用してその中のテキストを変更できます。

popup.setContentメソッドリファレンス

ここでは、これを証明するPlunker上のいくつかのコードがあります: http://plnkr.co/edit/vjS495QPXiJpKalrNpvo?p=preview


マウスオーバーで行う必要があることがわかりました:this.getPopup.setContent( 'blah blah blah');
TheSteve0

15

_popupその前にアンダースコアがあり、プライベート/メンバーインスタンスであり、直接アクセスすべきではないことを示します。正しいAPIはLayer.setPopupContent()です。例えば marker.setPopupContent(newContent);


3

返事が遅れるかもしれませんが、他の人にとっては、最善の方法はここにあると思います

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;
});

私はこれが古いことを知っていますが、それは私のGoogle検索結果に現れたので、他の人にとっても同様かもしれません...この方法の問題は、ポップアップが現在開いていない場合、そのボタンクリック(または何でも)あなたがバインドする)何もしません。次に、ポップアップを閉じてもう一度クリックすると、新しいコンテンツではなく元のコンテンツが表示されます!
DR

1

次の方法でポップアップコンテンツを取得できます。

marker.getPopup().getContent();

コンテンツを設定します:

marker.getPopup().setContent("123");
marker.getPopup().update();
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.