0

虽然是一位经验丰富的程序员，但我注意到使用 HTML/Javascript。我已经在下面发布了我的代码。我想做但没能做的是：

  • 延迟执行refreshmap()（例如延迟 500 毫秒）。我输入了setTimeout函数，但它似乎根本没有延迟任何东西，即使值很大。
  • 得到正确的输出。目前，distance并且duration在 for 循环的每次迭代后在打印结果中更新，但纬度/经度数据永远不会是（参见附加输出）。

html部分：

<!DOCTYPE html>
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Driving Distances and Times dataset creator</title> 
<script type="text/javascript" 
           src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head> 
<body style="font-family: Arial; font-size: 13px; color: red;white-space:pre-wrap;"> 

<form action="#" onsubmit="setRequest(); return false;" style="white-space:normal;">
<p>
Origin:
<input type="text" name="address1" value="Chicago" />
</p>
<p>
Latitude 1:
<input type="number" name="beginLat" value="35" />
Longitude 1:
<input type="number" name="beginLong" value="-80" />
</p>
<p>
Latitude 2:
<input type="number" name="endLat" value="40" />
Longitude 2:
<input type="number" name="endLong" value="-90" />
</p>
<p>
Divisions per side:
<input type="number" name="divisions" value="1" />
<input type="submit" value="Search" />
</p>
</form>
<p id="results"></p>
<div id="map" style="width: 400px; height: 300px;"></div>

Javascript定义：

<script type="text/javascript"> 
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {zoom:7,mapTypeId: google.maps.MapTypeId.ROADMAP}

var map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay.setMap(map);

var request = {origin: 'Chicago', destination: 'New York', travelMode: google.maps.DirectionsTravelMode.DRIVING};

从 HTML 表单中获取数据： 

function setRequest(msg) {
    var address1 = document.forms[0].elements[0].value;
    var lat1 = document.forms[0].elements[1].value;
    var long1 = document.forms[0].elements[2].value;
    var lat2 = document.forms[0].elements[3].value;
    var long2 = document.forms[0].elements[4].value;
    var ndiv = document.forms[0].elements[5].value;

    request.origin = address1;
    var k = 0;

    if (lat1>lat2) {
        var temp = lat2;
        lat2 = lat1;
        lat1 = temp;
    }


    if (long1>long2) {
        var temp = long2;
        long2 = long1;
        long1 = temp;
    }

    if (ndiv < 1) {
        ndiv = 1;
    }

    dlat = (lat2-lat1)/ndiv;
    dlong = (long2-long1)/ndiv;

    initial = 0;

    for (var i = 0; i < ndiv; i++) { 
        for (var j = 0; j < ndiv; j++) { 
            latitude = parseFloat(lat1) + dlat*0.5 + dlat*i;
            longitude = parseFloat(long1) + dlong*0.5 + dlong*j;
            request.destination = "" + latitude + "°, " + longitude + "°";
            setTimeout(refreshmap(),500);
        }
    }
};

求解行程时间和显示：

function refreshmap() {
    directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {

        if (initial == 0) {
            var lat1 = latitude - 0.5*dlat;
            var lat2 = latitude + 0.5*dlat;
            var long1 = longitude - 0.5*dlong;
            var long2 = longitude + 0.5*dlong;
            var outstring = "" + latitude + ", " + longitude + ", " +     response.routes[0].legs[0].distance.value + ", " + response.routes[0].legs[0].duration.value     + ", " + lat1 + ", " + long1 + ", " + lat2 + ", " + long2;

            document.body.appendChild(document.createTextNode(outstring +     String.fromCharCode(13,10)));

        }

        directionsDisplay.setDirections(response);

    }
});
};

var initial = 1;
var lat,long,dlat,dlong = 0;
refreshmap();
</script> 
</body> 
</html>

输出：

39.375, -88.75, 1184906, 39431, 38.75, -87.5, 40, -90
39.375, -88.75, 925474, 31504, 38.75, -87.5, 40, -90
39.375, -88.75, 834733, 27469, 38.75, -87.5, 40, -90
39.375, -88.75, 838895, 28560, 38.75, -87.5, 40, -90
39.375, -88.75, 1021536, 35325, 38.75, -87.5, 40, -90
39.375, -88.75, 776387, 26518, 38.75, -87.5, 40, -90
39.375, -88.75, 665551, 22838, 38.75, -87.5, 40, -90
39.375, -88.75, 627540, 21552, 38.75, -87.5, 40, -90
39.375, -88.75, 844986, 29534, 38.75, -87.5, 40, -90
39.375, -88.75, 663110, 21951, 38.75, -87.5, 40, -90

在此先感谢您提供任何有用的提示！

在被困在这里之后，我尝试了另一种方法，使 javascript 只查找一个位置，通过 python 脚本中设置的 url 参数提供给它。这样，我知道输出将是唯一的，我可以延迟所有我想要的。我以这种方式被困在从更新页面读取输出的过程中。即使使用 ghost.py 和<div>标签，我也无法获取更新的信息。这仍然是一个更好的追求途径吗？我想通过每次显示地图来遵守 TOS。

4

2 回答 2

2 
setTimeout(refreshmap(),500);

在这里，您直接调用该函数，并将调用结果传递给setTimeout(). 相反，您需要将该函数传递给 setTimeout。像这样：

setTimeout(refreshmap, 500);

对于不熟悉函数式语言的人来说，这可能有点陌生。

您可以查看setTimeout()文档以获得进一步说明。

于 2013-08-05T17:32:32.603 回答
1

好的，这是怎么回事，它正在延迟调用，然后使用最后一组经纬度。那是因为您使用的是全局变量，并且变量在refreshMap实际被调用之前正在发生变化。

您应该做的是将setTimeout(refreshmap(), 500)行更改为：

setTimeout(function() {
    refreshmap(latitude, longitude);
}, 500);

然后将您的refreshmap功能更改为：

function refreshmap(latitude, longitude){...}

您可能还必须包括其他变量。

于 2013-08-05T17:43:53.773 回答