如何在谷歌地图中显示标记从mysql php中检索数据[关闭]

I'm working in vehicle tracking system, here I have stored GPS data in MySql. What I need do is to show marker in Google Map. Every row data which denotes every second's GPS data. here my problem is I'm not able to show marker in Google map for every second.

Note: I am using timer function in js, Thats why Each and every second a variable is assigned and that variable will match with every second data in db.

This is my code:

<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>

This code will not work. You mix PHP and JS in a way it shouldn't be mixed.

I suggest create 2 separeted parts for displaying (JS) and fetching data (PHP).

window.setInterval should call php page which will return coordinates according to timeparam. Javascript will iterate it's own variable (not php variable) and call using ajax php webpage adding new markers to map.

ex. Add multiple markers to google maps from json

You need to use AJAX each time the timer ticks or refresh your page every 1 second. Obviously the later is not a very good idea. The reason is that the PHP on the page does not get executed every time the timer ticks (only on first load).

You will have to write an second file you return the latitude longitude data you require to show the pin.

ie: ( uses jQuery )

LATLONG SERVICE: ( /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) . "]);";
?>

THE MAP PAGE:

<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>

Something like that should do the trick