Leaflet中临时阻止弹出窗口关闭

huangapple go评论78阅读模式
英文:

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

huangapple
  • 本文由 发表于 2023年1月9日 01:09:24
  • 转载请务必保留本文链接:https://go.coder-hub.com/75049787.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定