-1

Ich möchte den Status und andere Variablen in der Konsole der Karten API drucken. Das XHR-Objekt, das ich erstellt habe, enthält die Daten in Variablen, aber wenn ich xhr.status drucken, heißt es 0. Aber in der Konsole Wenn ich geöffnet XHR Objektstatus ist 200. Ich möchte genau die gesamten Daten von Karten API zurückgeben. Ich sogar aktiviert CORS-Anfrage.So drucken Sie JSON-Daten aus Google Maps Richtungen API auf HTML-Seite

<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); 

} 
+0

Nun von dem Code ich bin überrascht, Sie können es sogar aufrufen, da Ihre 'console.log()' - es außerhalb des Funktionsumfangs ... –

Antwort

1

Wahrscheinlich erstellen Sie eine XMLHttpRequest; Sie benötigen onload Handler und die Attribute, um Ihnen innerhalb der Handler verfügbar werden wollen:

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

Bitte beachte, dass ich nehme an, Sie es mit xhr.send() senden.

Wenn Sie developer's guide von Google zur Verfügung gestellt, das Antwort-JSON-Objekt enthält ein Array namens . Sie sollten die erste Route Zugriff mit xhr.response.routes[0] und dem JSON-Objekt enthält summary und legs Array-Eigenschaften wie folgt:

"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": "[email protected]" 
     }, 
     "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" 
    } ], 

Also die oben sind für Sie relevante Informationen aus der Antwort zu extrahieren. Sie können von den folgenden einfachen example profitieren, um die Daten an einen <p> Tag oder ein beliebiges dom-Element zu binden, das Sie in Ihrem HTML-Code mögen. Hoffe das hilft.

+0

Vielen Dank. Nun, wie bekomme ich genau die Anweisungen von der JSON-Antwort auf meine HTML-Datei. Wie drucke ich die Antwort in HTML? –

Verwandte Themen