0

経験豊富なプログラマーですが、私は HTML/Javascript を使用することに注意しています。以下にコードを掲載しました。私がやりたいのにできていないことは次のとおりです。

  • の実行をrefreshmap()遅らせます (例: 500 ミリ秒の遅延)。関数を入れましたsetTimeoutが、値が大きい場合でも、何も遅延していないようです。
  • 正しい出力を取得します。現在、 for ループの各反復後に印刷結果でdistanceとdurationが更新されますが、緯度/経度データは更新されません (添付の出力を参照)。

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

役立つヒントを事前にありがとう！

ここで立ち往生した後、Pythonスクリプトで設定されたURLパラメーターを介して供給される、JavaScriptが1つの場所のみを検索するようにする代替手段を試しました。そうすれば、出力が一意になることがわかり、好きなだけ遅らせることができます。更新されたページから出力を読み取る際に、この方法で行き詰まりました。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 に答える