如何将本地JS、CSS文件集成到Wix站点（附Google Maps实例）

一、前置准备 #

• 确认你的 Google Maps API 密钥已启用，且将 Wix 站点域名添加到 API 密钥的允许访问列表（避免权限或跨域问题）
• 整理本地的 index.html、app.js、style.css：删除代码中的 <html>、<head>、<body> 根标签（Wix 嵌入的是 HTML 片段，无需完整页面结构）

二、上传静态资源到 Wix Public 文件夹 #

1. 打开 Wix 编辑器，点击左侧菜单栏的代码选项进入代码管理界面
2. 找到Public文件夹，点击右上角的上传文件，分别上传本地的 app.js 和 style.css
3. 上传完成后，点击对应文件右侧的三点菜单，选择复制公共URL，保存好这两个地址

三、嵌入 HTML 代码到 Wix 页面 #

1. 在目标页面中，点击左侧添加元素 → 嵌入代码 → HTML iframe
2. 双击 iframe 组件，打开设置代码弹窗，切换到代码标签
3. 粘贴处理后的 HTML 片段，同时引入刚才复制的 CSS 和 JS 公共 URL：

<link rel="stylesheet" href="你的style.css公共URL">
<div id="map"></div>
<script src="你的app.js公共URL"></script>

注意：必须在 style.css 中给 #map 容器设置明确宽高，比如 #map { width: 100%; height: 400px; }，否则地图会因容器尺寸为空无法显示

四、调整 Google Maps 初始化代码 #

打开 Wix Public 中的 app.js，修正初始化逻辑，确保 API 密钥正确且加载顺序合理：

// 替换为你的 Google Maps API 密钥
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

// 动态加载 Google Maps API 脚本，避免加载顺序问题
const script = document.createElement('script');
script.src = `https://maps.googleapis.com/maps/api/js?key=你的API密钥&callback=initMap`;
script.async = true;
document.head.appendChild(script);

五、测试与调试 #

• 点击 Wix 编辑器的预览按钮，查看地图加载状态
• 若仍无法显示，打开浏览器开发者工具（F12）排查：
  • 控制台是否有 API 密钥错误、跨域报错
  • Network 标签确认 style.css、app.js 及 Google Maps 脚本是否成功加载
  • 检查 #map 容器是否有正确的宽高样式

内容的提问来源于stack exchange，提问作者Daniel Lip