通過傳單中的AJAX更新彈出內容

Question

我正在嘗試更新傳單中彈出窗口的內容。 首先，我創建標記並將彈出窗口綁定到它們：

$.ajax({
                type: "GET",
                url: "/?p=map&json=1"+filter,
                dataType: 'json',
                success: function (response) {
                    geojson = L.geoJson(response, {
                        pointToLayer: function (feature, latlng) {
                            return L.marker(latlng); 
                        },
                        onEachFeature: onEachFeature
                    });
                    markers.addLayer(geojson);
                    map.addLayer(markers);
                    });
                }
            });
var layers = [];
function onEachFeature(feature, layer) {
            feature.layer = layer;
            layer.origID = feature.properties.id;

            if (feature.properties && feature.properties.project_name) {
                var divNode = document.createElement('DIV');
                divNode.innerHTML = 'initial popup content from database <button onclick="makeAjaxCall('+feature.properties.id+')">more</button>'; 
                layer.bindPopup(divNode);
            }

            layers.push(layer);

        }

最初，彈出窗口內有一個按鈕，該按鈕觸發ajax調用以更新彈出窗口內容。

該ajax調用返回並調用setPopupContent（）：

function setPopupContent(id,data){
            for(var i=0;i<layers.length;i++){
                if(layers[i].origID == id){
                    console.log(layers[i]);
                    var p = layers[i].getPopup();
                    p.setContent(data);
                    p.update();
                }
            }
        }

一切正常，但彈出窗口的大小未更新為新內容。 仍為301px。 p.update（）是否還應該更新彈出窗口的大小？

還是有更好的方法來處理從該彈出窗口中觸發的彈出內容更新？

這是一個示例： http ://plnkr.co/edit/LUyOWqkSVazhiadEix2q?p=preview（thx iH8！）

感謝幫助！

Answer 1

您的彈出式窗口寬度受到L.Popup的maxWidth選項的限制，該選項默認為300px：

http://leafletjs.com/reference.html#popup-maxwidth

在綁定/初始化彈出窗口時可以很容易地設置它，如下所示：

L.Marker([0, 0]).bindPopup('Lorem', {maxWidth: 600}).addTo(map);

您在Plunker上的叉子： http ://plnkr.co/edit/nfxhuUV40dfRV21YKFpu?p=preview