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 = '© <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
相关产品推荐
相关产品推荐

