HTML里程计算器赢得'工作不正常

HTML Mileage Calculator won't work properly

本文关键字：工作 不正常 计算器 HTML      更新时间：2023-09-26

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

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

  • 用户单击超链接
  • 调用calcRoute
  • 起点和终点被检索到请求中
  • 该请求异步发送到Google DirectionsService
  • 函数结束时不返回值
  • "未定义"附加到mailto链接
  • 浏览器触发邮件客户端
  • 。。。时间流逝
  • 异步方法完成并填充距离

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

还有一个快速提示-如果多次单击mailto:链接，则编写的代码将再次附加距离。你可能想同时解决这个问题。

相关文章：