Google认证时Cross-Origin-Opener-Policy阻止window.closed调用问题

核心错误点 #

1. Google Maps与Earth Engine Map对象混用：你创建了Google Maps JS API的embeddedMap实例，但后续使用的Map.addLayer、Map.setCenter是Earth Engine Code Editor专属的全局对象，浏览器环境中不存在该对象，导致图层无法加载、地图无内容。
2. 缺失必要密钥：Google Maps API的key参数为空，Earth Engine的CLIENT_ID未填写，导致API无法正常初始化。
3. 跨源策略冲突：Cross-Origin-Opener-Policy报错源于认证弹窗与主页面的跨源上下文隔离，影响弹窗关闭后的回调执行。
4. 无效调试代码：print(collection)是Code Editor专用调试方法，浏览器环境下会抛出错误。

具体修复步骤 #

1. 补全密钥信息 #

• 在Google Maps的script标签中填入你的Maps API密钥：

  <script src="https://maps.googleapis.com/maps/api/js?key=你的MapsAPI密钥"></script>
  

• 填入Earth Engine OAuth客户端ID：

  const CLIENT_ID = "你的OAuth客户端ID";
  

2. 替换错误的Map操作代码 #

将原有的Earth Engine图层添加代码，替换为适配Google Maps的TileLayer实现：

// 替换原Map.addLayer和Map.setCenter代码
const eeTileLayer = new ee.layers.EarthEngineTileLayer({
  image: collection.mean(),
  visParams: band_viz,
  name: 'Sulfur Dioxide',
  opacity: 0.5
});
// 将Earth Engine图层添加到Google Maps实例
eeTileLayer.setMap(embeddedMap);
// 调整地图中心（可选，替换原Map.setCenter）
embeddedMap.setCenter(0.0, 0.0, 2);

同时删除print(collection)代码。

3. 解决跨源策略报错 #

在HTML的<head>标签中添加跨源策略meta标签，让主页面与认证弹窗处于同一源组：

<meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin">
<meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp">

另外，不要直接用file://协议打开HTML文件，建议使用本地服务器（如http-server）以http协议运行页面，file://协议的跨源限制会导致API调用异常。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin">
    <meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp">
    <script src="https://maps.googleapis.com/maps/api/js?key=你的MapsAPI密钥"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/earthengine/0.1.365/earthengine-api.min.js"></script>
    <style>
        #map-container {
            height: 400px;
            width: 100%;
            background-color: #eee;
        }
    </style>
</head>

<body>
    <input id="g-sign-in" type="image"
        src="https://developers.google.com/identity/images/btn_google_signin_light_normal_web.png"
        onclick="onSignInButtonClick()" alt="Sign in with Google" hidden />

    <div id="map-container"></div>
    <script>
        const CLIENT_ID = "你的OAuth客户端ID";

        function setUpMap() {
            ee.initialize();

            const mapContainerEl = document.getElementById("map-container");
            const embeddedMap = new google.maps.Map(mapContainerEl, {
                center: { lng: -112.8598, lat: 36.2841 },
                zoom: 9,
            });

            var collection = ee.ImageCollection('COPERNICUS/S5P/OFFL/L3_SO2')
                .select('SO2_column_number_density')
                .filterDate('2023-12-01', '2024-01-01');

            var band_viz = {
                min: 0.0,
                max: 0.0015,
                palette: ['black', 'blue', 'purple', 'cyan', 'green', 'yellow', 'red']
            };

            const eeTileLayer = new ee.layers.EarthEngineTileLayer({
                image: collection.mean(),
                visParams: band_viz,
                name: 'Sulfur Dioxide',
                opacity: 0.5
            });
            eeTileLayer.setMap(embeddedMap);
            embeddedMap.setCenter(0.0, 0.0, 2);
        }

        function onSignInButtonClick() {
            ee.data.authenticateViaPopup(setUpMap);
        }

        ee.data.authenticateViaOauth(
            CLIENT_ID,
            setUpMap,
            alert,
            ['https://www.googleapis.com/auth/earthengine.readonly'],
            () => document.getElementById("g-sign-in").removeAttribute("hidden"),
            true
        );
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者0aBadran