英文:
Temporarily prevent popup from closing in Leaflet
问题
我有一个Leaflet中的弹出窗口,我可以编辑其内容,每当我编辑它时,我希望防止弹出窗口关闭,即,我想暂时阻止它关闭。
然而,查看L.Popup
的文档和源代码,我没有找到直接实现这一目标的方法,因此我尝试在它关闭时强制重新打开它,即当与其关联的图层上触发popupclose
事件或者当弹出窗口本身上触发remove
事件时。
我通过使用setTimeout
来实现这个目标,虽然它有点“不正规”:
let popup = marker.getPopup()
// 选项1:
marker.on('popupclose', (e) => {
if (/* 检查是否在编辑 */) {
// 无效
marker.openPopup()
// 有效
setTimeout(() => marker.openPopup(), 2)
}
})
// 选项2:
popup.on('remove', (e) => {
if (/* 检查是否在编辑 */) {
// 第一次有效,但之后无法关闭
marker.openPopup()
// 有效
setTimeout(() => marker.openPopup(), 2)
}
})
是否有更好的方法来实现这个目标,而不使用setTimeout
来“不正规”地解决问题?
英文:
I have this popup, in Leaflet, of which I can edit the contents, and whenever I am editing it I wish to prevent the popup from closing, i.e., I want to temporarily prevent it from closing.
However, looking at the documentation and source code for L.Popup
I couldn't find any methods for doing so directly and therefore tried to force it to reopen whenever it closes, i.e., when a popupclose
event is fired on the layer to which it is attached or whenever a remove
event is fired on the popup itself.
I did get it to work this way, but had to "hack" it using setTimeout
:
let popup = marker.getPopup()
// Option 1:
marker.on('popupclose', (e) => {
if (/* checks if editing */) {
// Does not work
marker.openPopup()
// Works
setTimeout(() => marker.openPopup(), 2)
}
})
// Option 2:
popup.on('remove', (e) => {
if (/* checks if editing */) {
// Works first time, but unable to close thereafter
marker.openPopup()
// Works
setTimeout(() => marker.openPopup(), 2)
}
})
Is there a better way to this without "hacking" it using setTimeout
?
答案1
得分: 0
我认为这是我能做的最好的,如果我不想使用其他方法。
let popup = marker.getPopup()
// 编辑时隐藏关闭按钮,非编辑时显示
marker.on('popupopen', function (e) {
if (!popup._closeButton) {
return
}
if (/* 检查是否正在编辑 */) {
L.DomUtil.addClass(popup._closeButton, 'hidden')
} else {
L.DomUtil.removeClass(popup._closeButton, 'hidden')
}
})
// 假设只有在弹出窗口打开时才会切换编辑
// 开始阻止弹出窗口关闭(在开始编辑事件上调用)
// 用户现在正在编辑
if (popup._closeButton) L.DomUtil.addClass(popup._closeButton, 'hidden')
marker.off('click', marker._openPopup) // 不要在图层点击时关闭弹出窗口
L.Util.setOptions(popup, {
autoClose: false,
closeOnEscapeKey: false,
closeOnClick: false
})
marker.closePopup().openPopup() // 强制新设置生效
// 停止阻止弹出窗口关闭(在停止编辑事件上调用)
// 用户不再编辑
if (popup._closeButton) L.DomUtil.removeClass(popup._closeButton, 'hidden')
marker.on('click', marker._openPopup) // 在图层点击时关闭弹出窗口
L.Util.setOptions(popup, {
autoClose: true,
closeOnEscapeKey: true,
closeOnClick: true,
})
marker.closePopup().openPopup() // 强制新设置生效
英文:
I think this is the best I can do, if I don't want to use the other method.
let popup = marker.getPopup()
// Hide close button when editing and show when not
marker.on('popupopen', function (e) {
if (!popup._closeButton) {
return
}
if (/* checks if editing */) {
L.DomUtil.addClass(popup._closeButton, 'hidden')
} else {
L.DomUtil.removeClass(popup._closeButton, 'hidden')
}
})
// Assuming toggle of editing only happens when popup is open
// Start preventing popup from closing (called on start edit event)
// User is now editing
if (popup._closeButton) L.DomUtil.addClass(popup._closeButton, 'hidden')
marker.off('click', marker._openPopup) // Don't close popup on layer click
L.Util.setOptions(popup, {
autoClose: false,
closeOnEscapeKey: false,
closeOnClick: false
})
marker.closePopup().openPopup() // Force new settings to take effect
// Stop preventing popup from closing (called on stop edit event)
// User is no longer editing
if (popup._closeButton) L.DomUtil.removeClass(popup._closeButton, 'hidden')
marker.on('click', marker._openPopup) // Do close popup on layer click
L.Util.setOptions(popup, {
autoClose: true,
closeOnEscapeKey: true,
closeOnClick: true,
})
marker.closePopup().openPopup() // Force new settings to take effect
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论