通过传单中的AJAX更新弹出窗口的内容

Update content of popup via AJAX in leaflet

本文关键字:窗口 AJAX 单中 更新      更新时间:2023-09-26

我正在尝试更新传单中弹出窗口的内容。首先,我创建标记并将弹出窗口绑定到它们:

$.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();
                }
            }
        }

一切都按预期进行,但弹出窗口的大小没有更新到新内容。它保持在301像素。p.update()不应该也更新弹出窗口的大小吗?

或者有更好的方法来处理从弹出窗口中触发的弹出内容更新吗?

以下是一个示例:http://plnkr.co/edit/LUyOWqkSVazhiadEix2q?p=preview(thx iH8!)

谢谢你的帮助!

您的弹出窗口宽度受到L.PopupmaxWidth选项的限制,该选项默认为300px:

http://leafletjs.com/reference.html#popup-最大宽度

这可以在绑定/初始化弹出窗口时轻松设置,如下所示:

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

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