-1

マイレージ計算用の HTML/Javascript コードを持っていますが、クリックして電子メールへのリンクが正しく機能しません。ウェブページのリンクを押すと、電子メールは正しく開きますが、電子メールの本文には計算された走行距離が表示されず、「未定義」と表示されます。

この問題を解決するために書く必要があるコードと、それをどこに置くべきか誰か教えてください。ありがとうございました。

私のコードは以下の通りです：

<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:enquiries@syedasadiq.co.uk?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
4

1 に答える 1

0

コードを少し再考する必要があるかもしれません。クリックが発生したときに calcRoute を呼び出していますが、残念ながら非同期サービスを扱っています。現時点でのプロセスは次のとおりです。

  • ユーザーがハイパーリンクをクリックします。
  • calcRoute が呼び出されます。
  • 開始点と終了点が要求に取り込まれます。
  • リクエストは非同期で Google DirectionsService に送信されます。
  • 関数は値を返さずに終了します
  • 「未定義」がmailtoリンクに追加されます
  • ブラウザがメール クライアントをトリガーする
  • ... 時を経て ...
  • 非同期メソッドが完了し、距離が入力されます。

問題はおそらくもう少し明白です。リンクがクリックされるまでに距離がすでに調べられていることを確認するために、コードを変更する必要があります。「ルートの計算」ボタンがこのプロセスをトリガーすることをお勧めします。その後、処理する必要がある mailto: リンクはすべて、計算済みの距離を追加することです。この計算の進行中は、mailto: リンクも無効にする必要があります。

同様に簡単なメモ - mailto: リンクが複数回クリックされた場合、書かれたコードは距離を再度追加します。同時にそれに対処したい場合があります。

于 2013-08-01T13:56:05.020 に答える