Question

我试图每隔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>

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

Answer 1

使用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;
        }
}
?>

试试吧！

每X次更新标记位置

1 个答案: