0

我在车辆跟踪系统工作，在这里我将 GPS 数据存储在 MySql 中。我需要做的是在谷歌地图中显示标记。每行数据表示每一秒的 GPS 数据。在这里我的问题是我无法在谷歌地图中每秒显示标记。

注意：我在 js 中使用计时器功能，这就是为什么每一秒都会分配一个变量，并且该变量将与 db 中的每一秒数据匹配。

这是我的代码：

<script type="text/javascript">
<?php $vehi = 1; ?>

window.setInterval(function initialize()
{

<?php   

    $sql= mysql_query("select * from maploca where id='$vehi'");
    $sqlnm = mysql_num_rows($sql);
    $sqlqry=mysql_fetch_object($sql);

?>


    <?php $vehi++;?>
    var json = [
                { "lat":<?php echo $sqlqry->latitude; ?>,
                  "lng":<?php echo $sqlqry->longitude; ?> }]
    var latlng = new google.maps.LatLng(<?php echo $sqlqry->latitude;?>,<?php echo $sqlqry->longitude;?>);

    var myOptions = {
    zoom: 18,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var polylineCoordinates = [
    new google.maps.LatLng(<?php echo $sqlqry->latitude;?>,<?php echo $sqlqry->longitude;?>)];
     var polyline = new google.maps.Polyline({
     path: polylineCoordinates,
     strokeColor: '#FF0000',
     strokeOpacity: 1.0,
     strokeWeight: 2,
    editable: true
     });

    polyline.setMap(map);
    for (var i = 0, length = json.length; i < length; i++) {
    var data = json[i],
          latLng = new google.maps.LatLng(data.lat, data.lng); 

      // Creating a marker and putting it on the map
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      }); 
    } 
}, 1000);

</script>
4

2 回答 2

2

每次计时器计时或每 1 秒刷新一次页面时，您都需要使用 AJAX。显然后者不是一个很好的主意。原因是页面上的 PHP 不会在每次计时器滴答时执行（仅在第一次加载时）。

您必须编写第二个文件，以返回显示图钉所需的纬度经度数据。

即：（使用jQuery）

拉特龙服务：（/ajax/getlatlong.php?vid=1）

<?php ob_start();

    header("Content-Type: application/javascript");

    /* 
    IMPORTANT DO SOME FUNCTION HERE TO MAKE SURE THE REQUEST 
    IS COMING FROM YOUR SITE AND NOT SOMEONE STEALING YOUR 
    DATA (session var, etc)
    */

    $sql= mysql_query("select * from maploca where id='" . 
        mysql_real_escape_string($_GET['vid']) . "'");

    $sqlnm = mysql_num_rows($sql);

    $ll = array();

    while ( $sqlqry = mysql_fetch_object($sql) ) {
        $ll[] = "{".
                  "\"lat\": " . $sqlqry->latitude . ", " .
                  "\"lng\": " . $sqlqry->longitude . 
                "}";
    }


    echo $_GET['callback'] . "([" . implode(",", $ll) . "]);";
?>

地图页面：

<script type="text/javascript">
    <?php $vehi = 1; ?>

    var myGM = function() {
        var me = this;

        <?php   
            $sql= mysql_query("select * from maploca where id='$vehi'");
            $sqlnm = mysql_num_rows($sql);
            $sqlqry=mysql_fetch_object($sql);
        ?>

        <?php $vehi++;?>
        var json = [{ 
            "lat":<?php echo $sqlqry->latitude; ?>,
            "lng":<?php echo $sqlqry->longitude; ?> 
        }];

        var latlng = new google.maps.LatLng(json[0].lat,json[0].lng);

        var myOptions = {
            zoom: 18,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        var polylineCoordinates = [latlng];

        var polyline = new google.maps.Polyline({
            path: polylineCoordinates,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2,
            editable: true
        });

        polyline.setMap(map);

        window.setInterval(function() {
            $.getJSON( "/ajax/getlatlong.php?vid=1&callback=?" )
                .done( function (data) {
                    me.updateMap(data);
                });   
        }, 2000);

        this.updateMap = function(data) {

            $(data).each(function() {
                var latLng = new google.maps.LatLng(this.lat, this.lng); 

                // Creating a marker and putting it on the map
                var marker = new google.maps.Marker({
                    position: latLng,
                    map: me.map
                }); 
            });

        }
    } 

    window.onload = function() {
        window.trackingMap = new myGM();
    }

</script>

像这样的东西应该可以解决问题

于 2013-05-06T06:21:33.973 回答
1

此代码将不起作用。您以不应该混合的方式混合 PHP 和 JS。

我建议创建 2 个单独的部分来显示（JS）和获取数据（PHP）。

window.setInterval 应该调用php页面，该页面将根据时间参数返回坐标。Javascript 将迭代它自己的变量（不是 php 变量）并使用 ajax php 网页调用添加新标记到地图。

前任。从 json 向谷歌地图添加多个标记

于 2013-05-06T05:50:04.460 回答