구글은 HTML 페이지

Question

내가지도 API의 콘솔의 상태 및 다른 변수를 인쇄 할

에 방향 API를지도에서 JSON 데이터를 인쇄하는 방법. 내가 만든 XHR 객체에는 변수의 데이터가 포함되어 있지만 xhr.status는 0으로 표시됩니다.하지만 콘솔에서 XHR 객체 상태를 열었을 때 200입니다. 지도 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); 

} 

Answer 1

아마도 대부분 XMLHttpRequest입니다. 난 당신이 xhr.send() 함께 보내는 가정

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

참고 :이 onload 핸들러는 핸들러 내에서 사용할 수 있습니다 원하는 특성을 제공해야합니다.

Google에서 제공하는 developer's guide을 보면 응답 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" 
    } ], 

그래서이 업입니다. 다음의 간단한 example에서 데이터를 <p> 태그 또는 html 내 원하는 dom 요소에 바인딩 할 수 있습니다. 희망이 도움이됩니다.