WordPress中Image Map Pro触发Elementor弹窗的JS实现求助

一、修复当前代码报错 #

你遇到的Uncaught SyntaxError: Unexpected token '<'错误，是因为在Image Map Pro的形状JS输入框中添加了完整的<script>标签——插件的这个输入框会直接执行JS代码，不需要包裹标签，多余的标签导致了语法错误。

修正后的代码 #

直接在形状的JS输入框中写入以下代码即可触发对应弹窗：

// 模拟点击已配置好的弹窗触发链接
jQuery('a[href="#PH08"]').click();

更稳妥的Elementor原生API方式 #

如果模拟点击不稳定，可以直接调用Elementor的弹窗API（需要先找到你的弹窗ID：在Elementor编辑弹窗时，URL中的post=xxx里的xxx就是弹窗ID）：

// 替换成你的弹窗ID
const popupId = 123;
if (window.elementorFrontend) {
    const popupDocument = window.elementorFrontend.documentsManager.getDocument(popupId);
    if (popupDocument) {
        popupDocument.showModal();
    }
}

二、交互式建筑模块的替代方案 #

如果觉得依赖第三方插件受限，可以考虑这些方案：

• SVG原生实现：用SVG制作建筑平面图，给每个区域（房间/单元）添加唯一ID或class，然后通过自定义JS绑定点击事件触发Elementor弹窗。SVG的优势是矢量清晰，形状控制精准，不需要依赖插件，灵活性更高。
• WP SVG Maps插件：专门支持SVG交互式地图，可可视化编辑区域，绑定自定义动作，比Image Map Pro更专注于SVG地图场景。
• Elementor自定义组件：用Elementor的HTML模块嵌入SVG，配合自定义JS代码实现交互，完全可控，适合需要高度定制的场景。

内容的提问来源于stack exchange，提问作者David Granados