bindPopup () для маркеров только при нажатии на них - PullRequest
Новая
       16

bindPopup () для маркеров только при нажатии на них

0 голосов
/ 14 апреля 2020

Следующий код html создает для них несколько маркеров и всплывающих окон. ... - просто замена длинных вещей, которые я пропустил, поскольку они не имеют значения в решении моей проблемы. Поскольку существует 100 с этих маркеров, создание всех всплывающих окон в одном go приводит к очень длительному времени загрузки в Интернете.

Есть ли способ каким-либо образом добавить всплывающие окна к маркерам только при нажатии на маркер на? Код ниже уже сгенерирован, поэтому я не могу перестроить его с нуля, используя новый лог c. 

var m1 = L.marker(...).addTo(map);
var p1 = L.popup(...);
var v1 = $('<div id="v1"></div>')[0];
p1.setContent(v1);
m1.bindPopup(p1);
vegaEmbed(v1, ...)

var m2 = L.marker(...).addTo(map);
var p2 = L.popup(...);
var v2 = $('<div id="v2"></div>')[0];
p2.setContent(v2);
m2.bindPopup(p2);
vegaEmbed(v2, ...)

var m3 = L.marker(...).addTo(map);
var p3 = L.popup(...);
var v3 = $('<div id="v3"></div>')[0];
p3.setContent(v3);
m3.bindPopup(p3);
vegaEmbed(v3, ...)

.
.
.
and so on

Попытка предложенного решения Falke Design:

Пока у меня есть следующий Python код: 

m = folium.Map(...)

fg = folium.FeatureGroup()

for i in range(0,400):
    p = folium.Popup().add_child(folium.VegaLite(...))
    folium.Marker(...popup = p).add_to(fg)

fg.add_to(m)

m.save('templates/index.html')

, который генерирует следующее html: 

var fg = L.featureGroup({}).addTo(m);

var m1 = L.marker(...).addTo(fg);
var p1 = L.popup(...);
var v1 = $('<div id="v1"></div>')[0]; 
p1.setContent(v1);
m1.bindPopup(p1);
vegaEmbed(v1, ...)
.
.
.
and so on up to 400

Ответы [ 2 ]

1 голос
/ 14 апреля 2020

Если я правильно понимаю (а могу и нет), вы бы хотели как-нибудь динамически сгенерировать «легкий» код html из кода фолиума. Если это вопрос, ответ - нет. Вы не можете.

Из Фолиум делает c:

Фолиум основан на сильных сторонах обработки данных экосистемы Python и сильных отображениях листовка. js библиотека. Управляйте вашими данными в Python, затем визуализируйте их на карте Leaflet через фолиум.

Фактически, ваша точка является несколько хорошо известной точкой.

1 голос
/ 14 апреля 2020

Да, есть способ. Вы можете добавить к каждому маркеру событие щелчка, а затем добавить всплывающее окно. 


var fg = L.featureGroup().addTo(map);

var m1 = L.marker([51.505, -0.09]).addTo(fg);
var v1 = '<div id="v1">v1</div>';
m1.popcontent = v1; //custom property to safe the html to the marker
var m2 = L.marker([51.505, -0.094]).addTo(fg);
var v2 = '<div id="v2">v2</div>';
m2.popcontent = v2;
var m3 = L.marker([51.505, -0.096]).addTo(fg);
var v3 = '<div id="v3">v3</div>';
m3.popcontent = v3;

fg.on('click',function(e){
    var layer = e.layer;
  layer.bindPopup(layer.popcontent).openPopup();
});

Если ваш html обновлен в vegaEmbed, вам нужно сохранить идентификатор html в маркер и затем прочитать его. 

var m1 = L.marker([51.505, -0.09]).addTo(fg);
var v1 = 'v1';
m1.popcontent = v1; //custom property to safe the id to the marker

fg.on('click',function(e){
    var layer = e.layer;
    layer.bindPopup($("#"+layer.popcontent).html()).openPopup(); // or document.getElementById(layer.popcontent).innerHTML;
});

Пример: https://jsfiddle.net/falkedesign/56dLkq9h/

...