JQuery и Google Maps API

Question

У меня есть следующий код;http://pastebin.com/Wf598D2E

Но я не могу получить значение расстояния до #result с первого клика.Я должен дважды щелкнуть, чтобы увидеть расстояние в #result.В чем проблема с этим кодом?

Answer 1

Причина в том, что вызов API Google является асинхронным, и ваш код выполняется до возврата вызова, заполняя значение 'dist', т. Е.

calcRoute требует 500 мс для возврата, и к тому времени ваш метод doc.ready послеэтот вызов уже выполнен.

Причина, по которой вы видите значение во второй раз, заключается в том, что значение, которое вы видите, является результатом первого вызова calcRoute

TO FIX:

простая однострочная поправка

    $(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");
            }
      });  

    }