如何在Wix创建类似VS Code Live Server的纯地图空白页面？

要让Wix页面和Live Server打开的效果一致，需要从Wix页面设置和HTML代码两个层面调整，彻底去除顶部菜单、滚动条等多余元素：

一、Wix页面基础设置调整 #

• 打开Wix编辑器，选中目标页面，点击左侧页面列表的三个点 → 页面设置
• 在页面布局选项卡中，将页面边距设为0，勾选"隐藏页眉"和"隐藏页脚"
• 在滚动行为中，设置为"不显示滚动条"（地图内部的滚动由Google Maps自身控制）

二、HTML代码优化 #

你的现有代码需要调整全局样式，消除默认边距和滚动条，同时让地图占满整个视口。修改后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Google Maps Api</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <style>
        /* 清除全局默认样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body, html {
            width: 100vw;
            height: 100vh;
            overflow: hidden; /* 彻底隐藏页面滚动条 */
        }
        #map {
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        #map.fullscreen {
            position: fixed;
            width:100%;
            height: 100%;
        }
    </style>
</head>

<body>
<div id="map"></div>

<script
      src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&v=weekly&language=he"
      defer
></script>

<script>let map;

    function initMap() {
        // 定位坐标
        const uluru = { lat: 32.1582615544072, lng: 34.89155037133181 };
    
        // 初始化地图
        map = new google.maps.Map(document.getElementById("map"), {
          zoom: 11,
          center: uluru,
          disableDefaultUI: true,
          fullscreenControl: true,
          gestureHandling: 'greedy' // 修正配置：无需嵌套在options内
        });
    
        // 创建自定义居中按钮
        const centerControlDiv = document.createElement("div");
        const centerControl = createCenterControl(map);
        centerControlDiv.appendChild(centerControl);
        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(centerControlDiv);
    
        const chicago = { lat: 41.85, lng: -87.65 };
    
        function createCenterControl(map) {
          const controlButton = document.createElement("button");
        
          // 按钮样式设置
          controlButton.style.backgroundColor = "#fff";
          controlButton.style.border = "2px solid #fff";
          controlButton.style.borderRadius = "3px";
          controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
          controlButton.style.color = "rgb(25,25,25)";
          controlButton.style.cursor = "pointer";
          controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
          controlButton.style.fontSize = "16px";
          controlButton.style.lineHeight = "28px";
          controlButton.style.borderLeftWidth = "8px";
          controlButton.style.margin = "8px 8px 22px 0";
          controlButton.style.padding = "0 5px";
          controlButton.style.textAlign = "center";
          controlButton.textContent = "Center Map";
          controlButton.title = "Click to recenter the map";
          controlButton.type = "button";
          
          // 按钮点击事件
          controlButton.addEventListener("click", () => {
            map.setCenter(chicago);
          });
          return controlButton;
        }
    
        // 添加矩形覆盖层
        const rectangle = new google.maps.Rectangle({
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.35,
            map,
            bounds: {
                north: uluru.lat - 0.005,
                south: uluru.lat + 0.005,
                west: uluru.lng - 0.005,
                east: uluru.lng + 0.005,
            },
          });
    }
    
      window.initMap = initMap;</script>

</body>
</html>

关键修改说明 #

• 新增全局样式清除规则，消除浏览器默认的边距和内边距
• 设置body, html为全屏尺寸并隐藏滚动条，避免页面级滚动
• 修改地图容器样式，去掉固定尺寸和居中定位，直接占满父容器
• 修正Google Maps初始化配置，将gestureHandling从嵌套的options中移出，符合API规范

部署注意事项 #

1. 在Wix编辑器中添加HTML iframe组件，粘贴修改后的代码
2. 设置iframe组件为"全屏"模式，关闭组件边框和边距
3. 发布页面后测试，若仍有多余元素，检查Wix页面设置是否完全关闭了页眉页脚

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