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

    }