Google静的地図へのCORSリクエストの作成

Question

Googleの静的マップapiにCORSリクエストを行い、キャンバスにマウントするイメージを返そうとしています（キャンバスのクロスオリジン保護を避けるため）。私は指示を正しく（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

XMLHttlRequestopen方法は約束を返しません。

リクエストを送信しません。リクエストを初期化するだけです。依頼を設定するには、後に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); 
} 

あなたは、要求が（onloadイベント）を完了した後xhr.responseは、あなたのイメージになることを確認することができます。

詳しくはhereをご覧ください。