2013-07-16 37 views
0

我试图每隔X次更新一次标记位置,并想知道如何做到这一点,以及是否有很好的示例。
我的代码是:
更新标记每X次更新一次

<?php 
include 'connect.php'; 
$json= array(); 
$res = "SELECT LatLon,fname FROM customers"; 
$res = mysql_query($res); 
while($r = mysql_fetch_assoc($res)) { 

    $XY = explode(",",$r['LatLon']); 

    $json[]= array($r['fname'],$XY[1],$XY[0]); 

} 

?> 
<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title>Google Maps Multiple Markers</title> 
    <link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet"> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 


    <script type="text/javascript"> 

    var map; 

    // Cretes the map 
    function initialize() { 
     map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 5, 
     center: new google.maps.LatLng(-33.92, 151.25), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
    } 

    // This function takes an array argument containing a list of marker data 
    function generateMarkers(locations) { 

     for (var i = 0; i < locations.length; i++) { 

     new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map, 
      title: locations[i][0] 
     }); 
     } 
    } 
    </script> 

</head> 
<body> 
    <div id="map" style="width: 1000px; height: 700px;"></div> 
    <script type="text/javascript"> 

     window.onload = function() { 
     initialize(); 
     var locations = <?php echo json_encode($json); ?>; 
    //setInterval(function(){generateMarkers(locations);},1000); 
     generateMarkers(locations); 
    }; 
    </script> 
</body> 
</html> 

我需要将数据放在其他文件?如果是的话该怎么做?以及我如何才能在标记上进行刷新,而不是在页面上进行刷新。
有什么建议吗?
谢谢!

+0

为什么不使用Ajax民意调查? – RomanGorbatko

回答

0

使用JQuery $ .ajax();

的index.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title>Google Maps Multiple Markers</title> 
    <link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet"> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 


    <script type="text/javascript"> 

    var map; 

    // Cretes the map 
    function initialize() { 
     map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 5, 
     center: new google.maps.LatLng(-33.92, 151.25), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
    } 

    // This function takes an array argument containing a list of marker data 
    function generateMarkers(locations) { 

     for (var i = 0; i < locations.length; i++) { 

     new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map, 
      title: locations[i][0] 
     }); 
     } 
    } 
    </script> 

</head> 
<body> 
    <div id="map" style="width: 1000px; height: 700px;"></div> 
    <script type="text/javascript"> 

     window.onload = function() { 
     initialize(); 
     setInterval(function() 
     { 
     $.ajax({ 
      url: "http://yoursite.com/location.php", 
      type: "POST", 
      data: {func: 'getLocation'}, 
      success: function(data) { 
      generateMarkers(data); 
      } 
     }); 
     }, 1000); 

    }; 
    </script> 
</body> 
</html> 

location.php

<?php 
include 'connect.php'; 

if (isset($_POST['func']) && $_POST['func'] === 'getLocation') 
{ 
     echo getLocation(); 

     function getLocation() 
     { 
       $json= array(); 
       $res = "SELECT LatLon,fname FROM customers"; 
       $res = mysql_query($res); 
       while($r = mysql_fetch_assoc($res)) { 

        $XY = explode(",",$r['LatLon']); 

        $json[]= array($r['fname'],$XY[1],$XY[0]); 

       } 

       return $json; 
     } 
} 
?> 

试试吧!