HTML里程計算器無法正常工作

-1

我有里程計算器的HTML/Javascript代碼，但點擊電子郵件鏈接無法正常工作。當我按下網頁中的鏈接時，電子郵件將正確打開，但是在電子郵件正文中，而不是顯示計算的里程數，表示「未定義」。HTML里程計算器無法正常工作

有人可以告訴我我需要寫的代碼來解決這個問題，並把它放在哪裏。謝謝。

我的代碼如下：

<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 

    var directionDisplay; 
    var map; 


function initialize() { 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var copenhagen = new google.maps.LatLng(55.6771, 12.5704); 
    var myOptions = { 
     zoom:12, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: copenhagen 
    } 

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    directionsDisplay.setMap(map); 
    } 


    var directionsService = new google.maps.DirectionsService(); 

    function calcRoute() { 
    var start = document.getElementById("start").value; 
    var end = document.getElementById("end").value; 
    var distanceInput = document.getElementById("distance"); 

    var request = { 
     origin:start, 
     destination:end, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 

    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
      distanceInput.value = response.routes[0].legs[0].distance.value/1000; 
     } 
    }); 
    } 
    </script> 

    <title>Distance Calculator</title> 

    <style type="text/css"> 

      body { 
       font-family:Helvetica, Arial; 
      } 
      #map_canvas { 
       height: 50%; 
      } 
    </style> 
    </head> 
    <body> 

    <body onload="initialize()"> 
    <p>Enter your current location and desired destination to get the distance</p> 
     <div> 
      <p> 
       <label for="start">Start: </label> 
       <input type="text" name="start" id="start" /> 

       <label for="end">End: </label> 
       <input type="text" name="end" id="end" /> 

       <input type="submit" value="Calculate Route" onclick="calcRoute()" /> 
      </p> 
      <p> 
       <label for="distance">Distance (km): </label> 
       <input type="text" name="distance" id="distance" readonly="true" /> 
      </p> 
<a href="mailto:[email protected]?subject=Mileage&body=" 
    onclick="this.href += calcRoute('string', 'distance');" 
> 
Click to send email 
</a> 
     </div> 
     <div id="map_canvas"></div> 
    </body> 
</html> 

javascript google geolocation maps

來源

2013-08-01 Pancake_Senpai

calcRoute在哪裏返回值？ –

我不知道。人們總是告訴我這是問題，但我不知道如何解決。 –

會在答案中解釋... –

我想你可能需要稍微重新考慮你的代碼。點擊發生時您正在調用calcRoute，但不幸的是您正在處理異步服務。您目前擁有的過程爲：

用戶單擊超鏈接。
calcRoute被調用。
將開始點和結束點檢索到請求中。
該請求被異步發送到Google DirectionsService。
你的函數完成不返回值
「未定義」被附加到mailto連結
瀏覽器trigges郵件客戶端
...久而久之...
異步方法完成並填充距離。

問題可能在這裏更明顯一點：你需要改變你的代碼，以確保點擊鏈接時已經查看了距離。我建議'計算路線'按鈕觸發這個過程，然後所有的mailto：鏈接需要處理的是追加已經計算的距離。此計算正在進行中時，您還應該禁用mailto：鏈接。

還有一個快速提示 - 如果mailto：鏈接被多次點擊，則所寫入的代碼將再次追加距離。你可能想同時解決這個問題。

來源

2013-08-01 13:56:05

感謝您的幫助，但您能否告訴我需要編寫的代碼才能工作。 –

有沒有我需要寫的代碼，還是整個腳本都要重寫？ –

您不必重寫腳本，只需要玩各種部件的觸發順序。我可以爲你重寫，但是（a）我沒有時間去測試它，（b）你不會學習開發人員，而其他編寫代碼的人不會幫助你。我希望我已經給了你足夠的反饋意見，以便你現在能夠回到自己身上再次刺傷它。 –

HTML里程計算器無法正常工作

回答

相關問題