我正在尝试更新传单中弹出窗口的内容。首先,我创建标记并将弹出窗口绑定到它们:
$.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!)
感谢您的帮助!
答案 0 :(得分:1)
您的弹出窗口宽度受maxWidth
L.Popup
选项的限制,默认为300px:
这可以在绑定/初始化弹出窗口时轻松设置,如下所示:
L.Marker([0, 0]).bindPopup('Lorem', {maxWidth: 600}).addTo(map);
Plunker的叉子叉子:http://plnkr.co/edit/nfxhuUV40dfRV21YKFpu?p=preview