Javascript HTML里程计算器赢得'；我不能正常工作_Javascript_Html_Email_Variables_Calculator

Javascript HTML里程计算器赢得'；我不能正常工作

javascript html email variables

Javascript HTML里程计算器赢得'；我不能正常工作,javascript,html,email,variables,calculator,Javascript,Html,Email,Variables,Calculator,我有一个里程计算器的HTML/Javascript代码，但是点击电子邮件链接不能正常工作。当我按下网页中的链接时，电子邮件会正确打开，但会显示在电子邮件正文中，而不是显示计算的里程数，它会显示“未定义” 有人能告诉我我需要写的代码来解决这个问题，并把它放在哪里。多谢各位我的代码如下： <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/&

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


方向显示；
var映射；
函数初始化（）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
var哥本哈根=新的google.maps.LatLng（55.6771,12.5704）；
变量myOptions={
缩放：12，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：哥本哈根
}
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
方向显示.setMap（地图）；
}
var directionsService=new google.maps.directionsService（）；
函数calcRoute（）{
var start=document.getElementById（“start”）.value；
var end=document.getElementById（“end”）.value；
var distanceInput=document.getElementById（“距离”）；
var请求={
来源：start，
目的地:完，
travelMode:google.maps.Directions travelMode.DRIVING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
distanceInput.value=response.routes[0]。legs[0]。distance.value/1000；
}
});
}
距离计算器
身体{
字体系列：Helvetica，Arial；
}
#地图画布{
身高：50%；
}
输入当前位置和所需目的地以获取距离

开始：
完:


距离（公里）：

谷歌地理位置地图

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

用户单击超链接
卡尔克劳特被称为
开始点和结束点被检索到请求中
请求以异步方式发送到Google DirectionsService
函数完成时不返回值
“未定义”将附加到mailto链接
浏览器触发邮件客户端
。。。时光流逝
异步方法完成，并填充距离

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

还有一个提示-如果多次单击mailto:链接，那么编写的代码将再次追加距离。您可能希望同时解决该问题。

calcRoute在哪里返回其值？我不知道。人们一直告诉我这就是问题所在，但我不知道如何解决。Will会在回答中解释…你应该在函数末尾有一个返回语句，但我已经描述了一个更基本的问题，与你使用方向服务的方式有关。谢谢你的帮助，但是你能告诉我我需要写什么代码才能工作吗？我需要写什么代码吗？或者整个脚本都需要重写吗？你不需要重写脚本，你只需要按照各个部分被触发的顺序来处理。我可以为您重写它，但是（a）我没有时间测试它，（b）作为开发人员，您不会学习，其他编写代码的人也不会帮助您。我希望我已经给了你足够的反馈，以便你现在能够回去自己尝试一下。谢谢，但我没有写javascript，只有HTML，因此我不知道它是如何工作的。我真的非常感谢你能提供的任何帮助。