Question

我有里程计算器的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

Answer 1

我认为您可能需要稍微重新考虑您的代码。您在点击发生时调用calcRoute，但遗憾的是您正在处理异步服务。您目前的流程是：

用户点击超链接。
calcRoute被调用。
将起点和终点检索到请求中。
请求以异步方式发送到Google DirectionsService。
您的函数在未返回值的情况下完成
'undefined'附加到mailto链接
浏览器触发邮件客户端
...时间过去了......
异步方法完成，并填充距离。

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

快速注释 - 如果多次单击mailto：链接，写入的代码将再次附加距离。您可能希望同时解决该问题。

HTML里程计算器无法正常运行

1 个答案: