JQuery 및 Google Maps API

Question

다음 코드가 있습니다. http://pastebin.com/Wf598D2E

하지만 처음 클릭 할 때 #result까지 거리 값을 가져올 수 없습니다. #result에서 거리를 보려면 두 번 클릭해야합니다. 이 코드의 문제점은 무엇입니까?

Answer 1

이유 인 구글 API를 호출은 비동기이고 코드는 시간 당신의 doc.ready 방법으로 를 반환

calcRoute이 500ms로 소요

즉 'DIST'값을 채우는 호출이 반환하기 전에 실행하는 그 호출이 이미 실행 된 후에.

두 번째 시간이 표시되는 값이

를 해결하려면 첫 번째 calcRoute 호출의 결과가 있다는 것입니다 값을 볼 수있는 이유는

간단한 한 줄의 개정

$(document).ready(function(){ 
      $("#send").click(function(event){ 
        calcRoute(); 
      }); 

    }); 

    function calcRoute() { 
     var start = document.getElementById("from").value; 
     var end = document.getElementById("to").value; 
     var ret = 0; 
     var request = { 
      origin:start, 
      destination:end, 
      travelMode: google.maps.TravelMode.DRIVING 
     }; 
     directionsService.route(request, function(result, status) { 
      //this is the onComplete method so do your UI amendments from in here 
      if (status == google.maps.DirectionsStatus.OK) { 
       directionsDisplay.setDirections(result); 
       dist = result.routes[0].legs[0].distance.value; 
       $("#result").html(dist); 
      }else{ 
        alert("Error"); 
      } 
     }); 

    }