JQuery和谷歌地图API

Question

我有以下代码; http://pastebin.com/Wf598D2E

但是我不能在第一次点击时将距离值设置为#result。我必须点击两次以查看#result中的距离。这段代码有什么问题？

Answer 1

的原因是，在调用谷歌API是异步的，你的代码中调用返回填充即

的“DIST”值

calcRoute需要500毫秒之前执行由时间 你doc.ready方法返回 在那个通话已经执行之后。

你看到的价值，第二次就是你看到的值是第一个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"); 
      } 
     }); 

    }