You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Leaflet地图标记点击事件在特定场景下失效(WordPress环境)排查求助

Leaflet地图标记点击事件在特定场景下失效(WordPress环境)排查求助

各位好,我遇到了一个Leaflet地图的奇怪问题,折腾好一阵没摸到头绪,想请大家帮忙指点下排查方向。

问题现象

我用Leaflet做了一个带分组标记、PNG/SVG叠加层的地图,大部分场景下运行正常,但两种情况里标记的点击弹窗功能会完全失效:

  • 浏览器缩放比例高于100%时(我这边150%缩放时问题最明显)
  • 地图没有垂直居中在浏览器视口,且视口尺寸小于1920x1080的时候

已完成的排查

  • 排除了Leaflet本身的问题:把完全相同的地图代码放到纯JS环境(比如JSFiddle)里运行,所有场景下标记点击都正常
  • 初步定位是WordPress环境/主题导致的:我的站点用的是Uncode主题+WPBakery编辑器,只有在这个环境里才会触发问题

我的地图核心代码(简化版)

// 初始化OSM底图
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    osmAttrib = '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    osm = L.tileLayer(osmUrl, {maxZoom: 20, attribution: osmAttrib});
var map = L.map('map', {
    zoomDelta: 0.25, 
    zoomSnap: 0.25, 
    wheelPxPerZoomLevel: 45
}).setView([54.86663, 24.19677], 15).addLayer(osm);

// 添加图片叠加层
var imageUrl = '/wp-content/uploads/2025/07/zemelapis_overlay_top_3.png',
    imageBounds = [[54.87852, 24.17560], [54.86740, 24.20274]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);

var imageUrl2 = '/wp-content/uploads/2025/07/zemelapis_overlay_bottom_3.png',
    imageBounds2 = [[54.86784, 24.17560], [54.85666, 24.20274]];
L.imageOverlay(imageUrl2, imageBounds2).addTo(map);

var imageUrl3 = '/wp-content/uploads/2025/07/buildings-05.svg',
    imageBounds3 = [[54.87852, 24.17560], [54.85670, 24.20274]];
L.imageOverlay(imageUrl3, imageBounds3).addTo(map);

// 分组标记示例(带弹窗)
var parkingIcon = L.icon({
    iconUrl: '/wp-content/uploads/2025/07/map-icon-parking.png',
    iconSize: [36, 48],
    iconAnchor: [18, 48],
    popupAnchor: [0, -46]
});
let parking = L.layerGroup([]).addTo(map);
var parkingMarkerSutikimoVartai = new L.marker([54.865928, 24.201969], { icon: parkingIcon })
    .bindPopup("<b>Lorem ipsum</b>")
    .addTo(parking);

当前调试到的线索

  • 控制台没有任何错误提示,完全没有报错信息可以参考
  • 用事件监听断点调试时发现:触发的是jQuery的ce.event事件,而不是Leaflet原生的domEvent
  • 查看这个jQuery事件的代码片段,发现它最终返回了undefined,但我完全搞不懂这个事件的作用:
ce.event = {
    global: {},
    add: function(t, e, n, r, i) {
        var o, a, s, u, l, c, f, p, d, h, g, v = _.get(t);
        if ($(t)) {
            n.handler && (n = (o = n).handler, i = o.selector), i && ce.find.matchesSelector(J, i), n.guid || (n.guid = ce.guid++),
            (u = v.events) || (u = v.events = Object.create(null)),
            (a = v.handle) || (a = v.handle = function(e) {
                return "undefined" != typeof ce && ce.event.triggered !== e.type ? ce.event.dispatch.apply(t, arguments) : void 0
            } ),
            l = (e = (e || "").match(D) || [""]).length;
            while (l--)
                d = g = (s = De.exec(e[l]) || [])[1], h = (s[2] || "").split(".").sort(),
                d && (f = ce.event.special[d] || {}, d = (i ? f.delegateType : f.bindType) || d, f = ce.event.special[d] || {},
                c = ce.extend({
                    type: d, origType: g, data: r, handler: n, guid: n.guid, selector: i,
                    needsContext: i && ce.expr.match.needsContext.test(i), namespace: h.join(".")
                }, o),
                (p = u[d]) || ((p = u[d] = []).delegateCount = 0, f.setup && !1 !== f.setup.call(t, r, h, a) || t.addEventListener && t.addEventListener(d, a)),
                f.add && (f.add.call(t, c), c.handler.guid || (c.handler.guid = n.guid)),
                i ? p.splice(p.delegateCount++, 0, c) : p.push(c), ce.event.global[d] = !0)
        }
    },
    // 代码片段省略
}

想请教的问题

我现在完全不知道从哪里入手了,请问大家有什么排查步骤或者思路推荐吗?

内容来源于stack exchange

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.07 06:59:32