PHP:Google Maps根据预定义的坐标集模拟路线上的移动标记

时间:2013-08-12 19:31:32

标签: php google-maps google-maps-markers move

我正在尝试根据一组预定义坐标开发一个模拟Google地图上移动总线的网站。我正在研究PHP,HTML和Javascript(谷歌地图Api)。保存坐标的数据库位于localhost上。我的问题与总线的实际模拟有关,这种模拟正朝着数据库中的所有坐标移动。

解释:数据库如下所示:

 id    latt       lon
 1.   53.4877   -2.27519
 2.   53.4859   -2.27489

等。有14个条目。

连接数据库的PHP脚本:

<?php
$host = "localhost";
$user = "hidden";
$pass = "";

$databaseName = "database";
$tableName = "locations";


$con = mysql_connect($host, $user, $pass);
$dbs = mysql_select_db($databaseName, $con);

$result = mysql_query("SELECT * FROM $tableName");

$data = array();

while ($row = mysql_fetch_row($result)) {
    $data[] = $row;
}  

echo json_encode($data);
?>

javascript函数:

    function moveBus(map, marker) 
        {

            $.ajax({                                      
                url: 'api2.php',                           
                data: "",                        

                dataType: 'json',                
                async: false,     
                success: function(data)          
                {

                    for (var i in data)
                    {
                        var row = data[i];             
                        var latt = row[1];           
                        var lon = row[2]; 

                        moveMarker(map, marker, latt, lon);
                    }
                } 
            })    
        }; 

moveMarker功能:

        function moveMarker( map, marker, latt, lon) {

        setTimeout( function(){ marker.setPosition( new google.maps.LatLng( latt ,       lon  ) ); }, 3500 );
        };

你可以理解我现在所拥有的只是在循环结束后在最后一组坐标上发送总线标记,而不是显示它到达那里的整个路线。我已经尝试了很多不同的方法来实现这一目标而没有成功。

有什么想法吗?

提前谢谢。

1 个答案:

答案 0 :(得分:1)

你的setTimeouts在3500毫秒的同时完成。您应该根据订单增加积分的超时时间......例如position_on_route * 3500。

 for (var i in data)
                {
                    var row = data[i];             
                    var latt = row[1];           
                    var lon = row[2]; 
                    timeout=i*3500;
                    moveMarker(map, marker, latt, lon, timeout);
                }




 function moveMarker( map, marker, latt, lon, timeout) {

    setTimeout( function(){ marker.setPosition( new google.maps.LatLng( latt ,       lon  ) ); }, timeout );
    };