如何动态更新地图上数据库中的标记而不刷新页面？

Question

您好，我在Google地图上的数据库中显示了我的标记，其中包含来自此link的Google API v3教程。

现在在我的代码中，我通过使用监视位置来动态更新标记的位置来加载当前用户的位置。

另外，它每5秒向我的数据库发送一次HTML5地理定位坐标。但是如何在30秒内动态更新标记在地图上的位置而不刷新我的页面？

这是我的代码（头）：

<script type="text/javascript">


//<![CDATA[

var customIcons = {
  restaurant: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
  },
  bar: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
  }
};

 setInterval(function load() {

  var infoWindow = new google.maps.InfoWindow;



  // Change this depending on the name of your PHP file
  downloadUrl("phpsqlajax_genxml.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {

      var name = markers[i].getAttribute("name");

                var id = markers[i].getAttribute("address");

      var address = markers[i].getAttribute("address");
      var type = markers[i].getAttribute("type");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));

          var chaine = markers[i].getAttribute("address");
          var reg=new RegExp("[ ,]+", "g");
          var mot= chaine.split(reg);
  // add each marker's location to the bounds
  bounds.extend(point);

      var html =  " Dernier statut : " + name + " <br><a  href=profil.php?id="+ mot[0] +">Cliquez-ici pour voir le profil de "+  mot[1] +"<a> <br><img with=28 src=images/message.png><a href=# alt="+ mot[0] +"|"+ mot[1] +" class=chat_user>Clavarder</a> ";

      var icon = type;

      var avatar = new google.maps.MarkerImage(icon,
new google.maps.Size(71, 71),
new google.maps.Point(0, 0),
new google.maps.Point(17, 34),
new google.maps.Size(50, 50)
);



      var pictureLabel = document.createElement("img");
 pictureLabel.src = type;


      var marker = new MarkerWithLabel({



       position: point,
       draggable: false,
   raiseOnDrag: false,
                      labelInBackground: false,

   map: map,
   labelContent: pictureLabel,
   labelAnchor: new google.maps.Point(32, 84),
          labelClass: "labels", // the CSS class for the label
   labelStyle: {opacity: 1}


        });
markersArray.push(marker);
      bindInfoWindow(marker, map, infoWindow, html);
      // center and zoom the map to fit the bounds

    }
 // center and zoom the map to fit the bounds
map.fitBounds(bounds);
  });     




}, 3000);

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });


}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);

}




function doNothing() {}

//]]>


  </script>
     <?php
         } ?>
    <script>
        $(function() {
        var pull        = $('#pull');
            menu        = $('nav ul');
            menuHeight  = menu.height();

        $(pull).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
        });

        $(window).resize(function(){
            var w = $(window).width();
            if(w > 320 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });
    });





setInterval(ajaxCall, 1000); //300000 MS == 5 minutes

function ajaxCall() {
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
    $.ajax({
        type: "POST",
        url: "index.php",
        data: {
            x: position.coords.latitude,
            y: position.coords.longitude
        },

    });

});
}
}
</script>

刷新数据库的php：

<div id="requete">
<?php 
if (!isset($_SESSION['email'])) {

         } else { 



        if (!isset($_POST['x']) AND !isset($_POST['y'])) {
         } else { 
    $base = mysql_connect ('localhost', '', '');
    mysql_select_db ('', $base);



// lancement de la requête
$sql ='UPDATE membre SET lat="'.$_POST['x'].'", lon="'.$_POST['y'].'"   WHERE email="'.$_SESSION['email'].'"';


// on exécute la requête (mysql_query) et on affiche un message au cas    où la requête ne se passait pas bien (or die)
mysql_query($sql) or die('Erreur SQL !'.$sql.'<br />'.mysql_error());

// on ferme la connexion à la base
mysql_close();

}
}
?></div> 

非常感谢