Question

我试图向Google的静态地图api发出CORS请求并返回要在画布上安装的图像（以避免画布的Cross Origin保护）。我不确定我是否正确遵循了说明（https://developers.google.com/api-client-library/javascript/features/cors），但xhr请求永远不会返回任何内容。

const position = latLngArg;
var xhr = new XMLHttpRequest();
xhr.open('GET', 
`http://maps.googleapis.com/maps/api/staticmap?center=${position.lat()},${position.lng()}&zoom=20&size=20x20&maptype=roadmap&sensor=false&key=AIzaSyBiE2efHKeAptVfVRtj9-ZDeHWPKgNjdNk`)
 .then(...)

Answer 1

XMLHttlRequest open方法不会返回承诺。

它也不发送请求，只是初始化它。为了设置请求，您需要在之后调用send方法。

您应该通过设置onreadystatechange属性来注册成功触发的回调。

查看示例here。

Answer 2

原生XHR不适用于承诺。

您可以尝试以下操作：

const position = latLngArg;
const xhr = new XMLHttpRequest();
const address = `http://maps.googleapis.com/maps/api/staticmap?center=${position.lat()},${position.lng()}&zoom=20&size=20x20&maptype=roadmap&sensor=false&key=AIzaSyBiE2efHKeAptVfVRtj9-ZDeHWPKgNjdNk`;

xhr.open('GET', address);
xhr.onload = () => onImageReceived(xhr.response);
xhr.send();

function onImageReceived(image) {
    console.log(image);
}

您可以在请求完成后验证xhr.response是否为您的图片（onload事件）。

详细了解https://github.com/joeferner/node-java。

向Google Static Maps发出CORS请求

2 个答案: