我想将谷歌地图中的StreetView集成到网络应用程序中，但我被CORS阻止了。我基本上是把街景作为背景拉到我的Three.js webba应用程序中。URL可以独立工作，但在我的应用程序中我会遇到cors错误。有什么办法解决这个问题吗？
这是我的网址：http://maps.google.com/maps?q=&layer=c&cbll＝40.7580336，-73.99855832&cbp=11,0,0,0,0
我以前也尝试过在任何地方使用紧身胸衣，如下所示：https://cors-anywhere.herokuapp.com/http://maps.google.com/maps?q=&layer=c&cbll＝40.7580336，-73.99855832&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>
您不能将谷歌地图应用程序直接嵌入到您的应用程序中。您必须使用他们的街景服务API，或者，如果您只需要静态图像而不需要任何交互，则使用他们的"街景静态API".
文档详细解释了如何实现这一点。