使用谷歌地图距离矩阵api的公共汽车跟踪系统

时间:2015-05-27 02:30:57

标签: google-maps real-time

我正在尝试使用Google距离矩阵服务创建实时总线跟踪应用程序,以便在用户点击总线图标时提供到达时间。为此,我创建了一个函数dorefresh,它每10秒从文件中获取latlong值并将其发送到另一个函数以显示在地图上。

我目前面临的问题是函数computedistance()在循环内部,因此函数computedistance()会自动调用并显示在地图之外。我希望系统能够仅在用户选择总线图标时仅在infowindow上显示估计的时间。此外,outputdiv位于代码的主体中。请帮助。非常感谢你

以下是我的bus1和dorefresh的代码

  function bus1(b1_lat, b1_lon)
{
    if(b1_lat != '')
    {
        var b1_latlng = new google.maps.LatLng(b1_lat, b1_lon);

        if(!b1_marker)
        {
            b1_marker = new google.maps.Marker(
            {
                position: b1_latlng, 
                map: map, 
                title:"BUS 1",
                icon: busmarker
            });

            var b1_infowindow = new google.maps.InfoWindow(
            {
                content: outputDiv
            });
            google.maps.event.addDomListener(b1_marker, 'click', function()
            {

                b1_infowindow.open(map,b1_marker);
            });
        }

        else
        {
            calculateDistances(b1_lat, b1_lon);
            b1_marker.setPosition(b1_latlng);

        }

    }       

}

    doRefresh();
function doRefresh() 
{
    var xhr; 
    try 
    {
        xhr = new XMLHttpRequest();
    }
    catch (e) 
    {
        xhr = false;
    }

    xhr.onreadystatechange  = function() 
    { 
        if (xhr.readyState  == 4) 
        {
            if (xhr.status  == 200) 
            {
                b1_dte = xhr.responseText.split('_')[0];
                b1_lat = xhr.responseText.split('_')[1];
                b1_lon = xhr.responseText.split('_')[2];
                if (b1_dte && b1_lat && b1_lon) 
                {
                    bus1(b1_lat, b1_lon);
                }
            }
        }
    };

    xhr.open("GET", "http://203.80.17.205/~shankara/final/i-am-here-position?" + Math.random(),  true); 
    xhr.send(null);
    setTimeout('doRefresh()', 3000);
}
    <body>
<div id="panel">
    <input id="route1" type="checkbox" onClick="toggleLayer(flightPath,'route1')" /> Route 1

</div>
<div id="outputDiv"></div>
<div id="map-canvas" style="width: 700px; height: 600px"></div>

0 个答案:

没有答案