Ulotka: dostosuj wyskakujące okienka do rozmiaru obrazu

Question

Próbuję dołączyć zdjęcia do moich okienków wyskakujących o liściach, ale rozmiar wyskakującego okienka nie dostosowuje się do rozmiaru obrazu. Znalazłem rozwiązanie tego na github:

https://github.com/Leaflet/Leaflet/issues/724

Mimo że rozwiązanie rozwiązuje rozmiar popup, wynik jest przesunięty i okienko nie pojawi się centralnie nad ikoną ... Każdy marker/sposób na zmianę tego?

.leaflet-popup-content { 
    width:auto !important; 
} 

Również inne proponowane rozwiązanie (ustawienie maxwidth na popup) nie pomaga w moim przypadku. Szerokość popup utrzymuje się na bycie domyślną szerokość rozmiar to 300 ...

function pop_Fotos(feature, layer) { 
    var popupContent = '<img style="max-height:500px;max-width:500px;" src="..."); 
    layer.bindPopup(popupContent, {maxWidth: 500, closeOnClick: true}); 
} 

Answer 1

Wystarczy określające maxWidth: "auto" opcję na popup wydaje się dość ...

layer.bindPopup(popupContent, { 
    maxWidth: "auto" 
}); 

Demo: http://jsfiddle.net/3v7hd2vx/29/

---

ED IT

Niestety, jeśli obraz nie jest jeszcze załadowany w pamięci podręcznej przeglądarki, popup zostanie otwarty od razu z domyślnego rozmiaru i dostosować jego wielkość ale nie jego położenie raz obraz jest w pełni załadowany i wyświetlane. W rezultacie wyskakujące okienko jest przesunięte, a jego strzałka jest niewłaściwie umieszczona w porównaniu do znacznika, do którego jest przypisana.

Prostym rozwiązaniem jest słuchać przypadku obraz "load" i ponownie otworzyć okienko w tym momencie:

popupContent = document.createElement("img"); 
popupContent.onload = function() { 
    layer.openPopup(); 
}; 
popupContent.src = "path/to/image"; 
layer.bindPopup(popupContent, { 
    maxWidth: "auto" 
}); 

Updated demo: http://jsfiddle.net/3v7hd2vx/32/

---

EDIT 2

Oto bardziej ogólne rozwiązanie: przechwytywanie "load" wydarzenie na wszystkich wyskakujących okienkach ulotek i za każdym razem wymuszaj je na update().

document.querySelector(".leaflet-popup-pane").addEventListener("load", function (event) { 
    var tagName = event.target.tagName, 
     popup = map._popup; // Currently open popup, if any. 

    if (tagName === "IMG" && popup) { 
    popup.update(); 
    } 
}, true); // Capture the load event, because it does not bubble. 

Demo: https://jsfiddle.net/3v7hd2vx/277/

referencyjny: Leaflet issue #5484 (comment)

Answer 2

• Istnieje funkcja aktualizacji dla pop-upów (który mówi doc jest tylko dla tego celu): http://leafletjs.com/reference.html#popup-update.

• Również dla wydarzenia, w którym pojawia się okno podręczne: http://leafletjs.com/reference.html#path-popupopen.

• a zdarzenie przekazany do obsługi zdarzeń identyfikuje okienko: http://leafletjs.com/reference.html#popup-event-popup

My pop up treść była nieco bardziej zróżnicowane niż tylko prosty obrazek, ale szerokość była, oczywiście, nadal wpływa przez dowolny czas ładowania obrazów w treści (i było dobrze, gdy obraz był w pamięci podręcznej przeglądarki).

Więc kiedy uderzyć ten problem, w skrócie, co zrobiłem przy użyciu jQuery:

function addpopup(mymarker, mycontent) { 
    var myid = "thismarker"; // or whatever 
    mymarker.bindPopup("<div id='"+myid+"'>" + mycontent + "</div>", 
     {maxWidth: "auto"}); 
    mymap.on("popupopen", function(e){ 
     $("#"+myid+" img").one("load", function(){ e.popup.update(); }); 
    }); 
}