Google 街景被 CORS 屏蔽

Question

我想将 google 地图中的 StreetView 集成到 Web 应用程序中，但我被 CORS 阻止了。我基本上将街景作为背景拉入我的 Three.js 网络应用程序。 URL 独立工作，但在我的应用程序中出现 cors 错误。有什么办法可以解决这个问题？

这是我的 URL： http://maps.google.com/maps?q=&layer=c&cbll=40.7580336,-73.9855832&cbp=11,0,0,0,0

我之前也尝试过使用 cors-anywhere，如下所示： https://cors-anywhere.herokuapp.com/http://maps.google.com/maps?q=&layer=c&cbll=40.7580336,-73.9855832&cbp=11,0,0,0,0

但没有成功。

我的代码：

<html>

<head>
    <script src="https://threejs.org/build/three.js"></script>
</head>

<body>
    <script src="js/three.js"></script>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        // BG
        var container, loader, camera, scene, renderer, controls, bgTexture, bgWidth, bgHeight;
        loader = new THREE.TextureLoader();

        var url = "http://maps.google.com/maps?q=&layer=c&cbll=40.7580336,-73.9855832&cbp=11,0,0,0,0";

        bgTexture = loader.load(url,

            function (texture) {
                var img = texture.image;
                bgWidth = img.width;
                bgHeight = img.height;
                resize();
            }
        );
        scene.background = bgTexture;
        //

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var geometry = new THREE.BoxGeometry();
        var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        camera.position.z = 5;

        var animate = function () {
            requestAnimationFrame(animate);

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            renderer.render(scene, camera);
        };

        animate();
    </script>
</body>

</html>

Answer 1

您不能将 Google 地图应用程序直接嵌入到您的应用程序中。您必须使用他们的 Street View Service API 或者，如果您只需要一张没有任何互动的静态图片，他们的街景静态 API .

文档详细解释了如何实现。

Google 街景被 CORS 屏蔽

Google Streetview blocked by CORS

javascript

google-maps

cors

cors-anywhere