-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。
  • 您的函数在没有返回值的情况下完成
  • 'undefined' 附加到 mailto 链接
  • 浏览器触发邮件客户端
  • ... 时间流逝 ...
  • 异步方法完成，并填充距离。

问题在这里可能更明显一些：您需要更改代码以确保在单击链接时已经查找了距离。我建议“计算路线”按钮触发此过程，然后所有 mailto: 链接需要处理的是附加已计算的距离。您还应该在此计算过程中禁用 mailto: 链接。

还有一个简短的说明 - 如果多次单击 mailto: 链接，编写的代码将再次附加距离。您可能希望同时解决该问题。

于 2013-08-01T13:56:05.020 回答