Javascript 如何在html页面上打印来自google maps directions api的JSON数据

我想在地图控制台中打印状态和其他变量 应用程序编程接口。 我创建的XHR对象包含变量中的数据，但在打印时 xhr.status显示为0。但在控制台中，当我打开XHR时，对象状态是 200 我正想打印从maps API返回的所有数据。我甚至 已启用CORS请求

<button type="button" onclick="myFunction()">Submit</button></br>

</form>
<p id="demo"> hello</p>

<script>
function myFunction() {

  var slat = document.getElementById("slat").value;

  var slong = document.getElementById("slong").value;
  var dlat = document.getElementById("dlat").value;
  var dlong = document.getElementById("dlong").value;
  //xhr object for sending request to maps api
  var xhr= 
  createCORSRequest('GET',"https://maps.googleapis.com/maps/api/directions/json?
  origin=75+9th+Ave+New+York,+NY&destination=Boston&key=My key was here");
  if (!xhr) {
    throw new Error('CORS not supported');
  }

  console.log(xhr); // seeing the  xhr object
  console.log(xhr.response); // trying to print xhr response but nothing is coming
  console.log(xhr.status); // 0 is being displayed as status but 200 is there in xhr object
  console.log(xhr.responseType);

}

提交

您好
函数myFunction（）{
var slat=document.getElementById（“slat”）.value；
var slong=document.getElementById（“slong”）.value；
var dlat=document.getElementById（“dlat”）.value；
var dlong=document.getElementById（“dlong”）.value；
//用于向maps api发送请求的xhr对象
变量xhr=
createCORSRequest（'GET'，'https://maps.googleapis.com/maps/api/directions/json?
起点=75+9+Ave+纽约+纽约，+NY&destination=波士顿&key=我的钥匙在这里”）；
如果（！xhr）{
抛出新错误（“不支持CORS”）；
}
console.log（xhr）；//查看xhr对象
console.log（xhr.response）；//试图打印xhr响应，但没有结果
console.log（xhr.status）；//0显示为状态，但xhr对象中有200
console.log（xhr.responseType）；
}

很可能您正在创建一个；您需要提供

onload

处理程序，并且所需的属性将在处理程序中可用：

xhr.onload=function(e) {
        console.log(xhr.response);
        console.log(xhr.status);
        console.log(xhr.responseType);
}

请注意，我假设您使用

xhr.send（）

发送它

如果您查看google提供的响应json对象，它包含一个名为

routes

的数组。您应该使用

xhr.response.routes[0]

访问第一条路由，此json对象包含

summary

和

legs

数组属性，如下所示：

"routes": [ {
    "summary": "I-40 W",
    "legs": [ {
      "steps": [ {
        "travel_mode": "DRIVING",
        "start_location": {
          "lat": 41.8507300,
          "lng": -87.6512600
        },
        "end_location": {
          "lat": 41.8525800,
          "lng": -87.6514100
        },
        "polyline": {
          "points": "a~l~Fjk~uOwHJy@P"
        },
        "duration": {
          "value": 19,
          "text": "1 min"
        },
        "html_instructions": "Head \u003cb\u003enorth\u003c/b\u003e on \u003cb\u003eS Morgan St\u003c/b\u003e toward \u003cb\u003eW Cermak Rd\u003c/b\u003e",
        "distance": {
          "value": 207,
          "text": "0.1 mi"
        }
      },
      ...
      ... additional steps of this leg
    ...
    ... additional legs of this route
      "duration": {
        "value": 74384,
        "text": "20 hours 40 mins"
      },
      "distance": {
        "value": 2137146,
        "text": "1,328 mi"
      },
      "start_location": {
        "lat": 35.4675602,
        "lng": -97.5164276
      },
      "end_location": {
        "lat": 34.0522342,
        "lng": -118.2436849
      },
      "start_address": "Oklahoma City, OK, USA",
      "end_address": "Los Angeles, CA, USA"
    } ],

---

因此，这取决于您从响应中提取相关信息。您可以使用以下简单方法将数据绑定到html中的

标记或任何您喜欢的dom元素。希望这有帮助。

从代码中我很惊讶您甚至可以调用它，因为您的

控制台.log（）

-正在函数范围之外调用它…谢谢。现在，我如何从JSON响应中获得html文件的确切方向。另外，如何以HTML打印响应