Google Distance Matrix APIからJSONのJavaScript値を取得

Question

私は現在、Google Maps Distance Matrix Apiの助けを借りてDistance Infoアプリケーションを作成しています。以下は私のコードです：

document.getElementById('generateDistance').addEventListener('click', function() { 
 
    var origin = document.getElementById('fromLocation').value; 
 
    var destination = document.getElementById('toLocation').value; 
 

 
    var distanceUrl = "https://maps.googleapis.com/maps/api/distancematrix/json?units=metrics&origins=" + origin + "&destinations=" + destination + "&key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" 
 

 
    window.location = distanceUrl; 
 
});

何それがないこと、それはURLを開き、JSONを経由して距離情報を示しています。私が望むのは、それらの値を取得し、それをランディングページに表示させることだけです。 JSONオブジェクトの解析について読んでいます。誰かが私がそれを解析して理解するのを助けることができますか？

Answer 1

ブラウザでurlを開くのではなく、スクリプトがあなたのページの実行時に応答を処理できるように、ajaxリクエストが必要です。

これは、それはあなたが応答を取得するための要求を取得するのAjaxを使用する必要が

var xhr = new XMLHttpRequest(); 
xhr.open('GET', distanceUrl); 
xhr.send(null); 

xhr.onreadystatechange = function() { 
    var DONE = 4; // readyState 4 means the request is done. 
    var OK = 200; // status 200 is a successful return. 
    if (xhr.readyState === DONE) { 
    if (xhr.status === OK) { 
     plaintext = xhr.responseText; 
     responseObject = JSON.parse(plaintext); 
     console.log(plaintext); // 'This is the returned text.' 
     console.log(responseObject) // Logs the parsed json object you can easily access properties, check the console which they are, assuming there is a property calculatedDistance you could access like: 
     console.log(responseObject.calculatedDistance) 
    } else { 
     console.log('Error: ' + xhr.status); // An error occurred during the request. 
    } 
    } 
};