php - 带有坐标数据库的谷歌地图。实时更新

Question

我目前已经部署了一个 web 应用程序，它使用 geoLocation (HTML5) 和 ajax 显示我们现场员工的位置，以发布到将位置存储在数据库中的 PHP 脚本。

如果您完全刷新页面，地图会更新员工的位置，但我不知道如何让页面显示实时移动的标记？

这是JS。

navigator.geolocation.getCurrentPosition(
    function(position) {

     //alert("position is: " + position.coords.latitude + ", " + position.coords.longitude);

    $.ajax({  
                type: "POST",  
                url: "/includes/functions/js.locationServices/locationServices.php",  
                data: "latitude="+ position.coords.latitude +"&longitude="+ position.coords.longitude
              });                  
});

php 代码是一个简单的获取和更新数据库。

谷歌地图代码

function parseToXML($htmlStr) 
{ 
    $xmlStr=str_replace('<','&lt;',$htmlStr); 
    $xmlStr=str_replace('>','&gt;',$xmlStr); 
    $xmlStr=str_replace('"','&quot;',$xmlStr); 
    $xmlStr=str_replace("'",'&#39;',$xmlStr); 
    $xmlStr=str_replace("&",'&amp;',$xmlStr); 

return $xmlStr; 
} 

    $sql = $dbh->prepare("SELECT * FROM authUsers JOIN techLocation ON authUsers.username = techLocation.username");
        $sql->execute();

    header("Content-type: text/xml");

    echo '<markers>';

    while ($row = $sql->fetch(PDO::FETCH_ASSOC))
    {
        // ADD TO XML DOCUMENT NODE
        $time = date("g:i a", strtotime($row['lastLocated']));
        $tech = $row['id'];

        if(is_numeric($row['id'])) { $tech = '#'.$row['id']; }

        echo '<marker ';
        echo 'name="' . parseToXML($row['fullname']) . '" ';
        echo 'tech="' . parseToXML($tech) . '" ';
        echo 'phone="' . parseToXML($row['phone']) . '" ';
        echo 'email="' . parseToXML($row['email']) . '" ';
        echo 'time="' . parseToXML($time) . '" ';
        echo 'lat="' . $row['latitude'] . '" ';
        echo 'lng="' . $row['longitude'] . '" ';
        echo 'type="' . $row['dept'] . '" ';
        echo '/>';
    }

    echo '</markers>';

地图页面

    <script src="https://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    var customIcons = {
      Installs: {
        icon: '/location/images/installs.png',
        shadow: '/location/images/shadow50.png'
      },
      Service: {
        icon: '/location/images/service.png',
        shadow: '/location/images/shadow50.png'
      }
    };

    var markers = new Array();

    function updateMarker(techSelectionList) {      
            var selectedEmail = techSelectionList.options[techSelectionList.selectedIndex].value;
            var selectedText = techSelectionList.options[techSelectionList.selectedIndex].text;


            for (var i = 0; i < markers.length; i++)
            {
                var techEmail = markers[i].getTitle();


                if (techEmail == selectedEmail)
                {
                    google.maps.event.trigger(markers[i], 'click');
                    break;
                }
            }
    }

    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(<?php echo $mapCenter; ?>),
        zoom: 12,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("genxml.php", function(data) 
      {
        var xml = data.responseXML;
        var markersXml = xml.documentElement.getElementsByTagName("marker");

        var sidebar = document.getElementById('sidebar');
        sidebar.innerHTML = '';

        for (var i = 0; i < markersXml.length; i++) 
        {          
            var name = markersXml[i].getAttribute("name");
                var phone = markersXml[i].getAttribute("phone");
            var email = markersXml[i].getAttribute("email");
                var tech = markersXml[i].getAttribute("tech");
                var time = markersXml[i].getAttribute("time");
                var type = markersXml[i].getAttribute("type");
                var point = new google.maps.LatLng(
                parseFloat(markersXml[i].getAttribute("lat")),
                parseFloat(markersXml[i].getAttribute("lng"))
            );

            var html = "<h3>" + name + " - "+ tech + " </h3><br/>Phone:<b> <a href='tel:" + phone + "'>" + phone + "</a></b><br/>Email:<b> <a href='mailto:" + email + "'>" + email + "</a></b><br/>Located:<b> " + time + "</b>";
                var icon = customIcons[type] || {};

                var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: icon.icon,
                shadow: icon.shadow
            });

            marker.setTitle(email);
            markers.push(marker);

            bindInfoWindow(marker, map, infoWindow, html);

            var sidebarEntry = createSidebarEntry(marker, tech, name, email);
            sidebar.appendChild(sidebarEntry);      
        }           

    });

    function createSidebarEntry(marker, tech, name, email) 
    {
        var text =  tech + " - " + name;                
        var div = document.createElement('option');
        div.text = text;
        div.value = email;

        return div;
    }
}

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>