javascript Google Maps V3：定期更新标记

Google Maps V3: Updating Markers Periodically

提问by dkanejs

I've followed the PHP/MYSQL tutorial on Google Maps found here.

我已经按照此处找到的 Google 地图上的 PHP/MYSQL 教程进行操作。

I'd like the markers to be updated from the database every 5 seconds or so.

我希望每 5 秒左右从数据库中更新一次标记。

It's my understanding I need to use Ajax to periodicity update the markers, but I'm struggling to understand where to add the function and where to use setTimeout()etc

我的理解是我需要使用 Ajax 来周期性地更新标记，但我很难理解在哪里添加函数以及在哪里使用setTimeout()等

All the other examples I've found don't really explain what's going on, some helpful guidance would be terrific!

我发现的所有其他例子都没有真正解释发生了什么，一些有用的指导会很棒！

This is my code (Same as Google example with some varchanges):

这是我的代码（与 Google 示例相同，但有一些var更改）：

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(37.80815648152641, 140.95355987548828),
    zoom: 13,
    mapTypeId: 'roadmap'
  });
  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP file

  downloadUrl("nwmxml.php", function(data) {
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var host = markers[i].getAttribute("host");
      var type = markers[i].getAttribute("active");
      var lastupdate = markers[i].getAttribute("lastupdate");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + "Host: </b>" + host + "<br>" + "<b>Last Updated: </b>" + lastupdate + "<br>";
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
      bindInfoWindow(marker, map, infoWindow, html);

    }

  });
}

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() {}

I hope somebody can help me!

我希望有人可以帮助我！

回答by Michal

Please note I have not tested this as I do not have a db with xml handy

请注意，我没有对此进行测试，因为我没有一个带有 xml 的数据库。

First of all you need to split your load() function into a function that initializes the map & loads the markers on domready and a function that you will use later to process the xml & update the map with. This needs to be done so you do not reinitialize the map on every load.

首先，您需要将 load() 函数拆分为初始化地图并在 domready 上加载标记的函数，以及稍后将用于处理 xml 和更新地图的函数。这需要完成，这样您就不会在每次加载时重新初始化地图。

Secondly you need to decide what to do with markers that are already drawn on the map. For that purpose you need to add them to an array as you add them to the map. On second update you have a choice to either redraw the markers (rebuild the array) or simply update the existing array. My example shows the scenario where you simply clear the old markers from the screen (which is simpler).

其次，您需要决定如何处理已经绘制在地图上的标记。为此，您需要在将它们添加到地图时将它们添加到数组中。在第二次更新时，您可以选择重新绘制标记（重建数组）或简单地更新现有数组。我的示例显示了您只需从屏幕上清除旧标记（更简单）的场景。

//global array to store our markers
    var markersArray = [];
    var map;
    function load() {
        map = new google.maps.Map(document.getElementById("map"), {
            center : new google.maps.LatLng(37.80815648152641, 140.95355987548828),
            zoom : 13,
            mapTypeId : 'roadmap'
        });
        var infoWindow = new google.maps.InfoWindow;

        // your first call to get & process inital data

        downloadUrl("nwmxml.php", processXML);
    }

    function processXML(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        //clear markers before you start drawing new ones
        resetMarkers(markersArray)
        for(var i = 0; i < markers.length; i++) {
            var host = markers[i].getAttribute("host");
            var type = markers[i].getAttribute("active");
            var lastupdate = markers[i].getAttribute("lastupdate");
            var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
            var html = "<b>" + "Host: </b>" + host + "<br>" + "<b>Last Updated: </b>" + lastupdate + "<br>";
            var icon = customIcons[type] || {};
            var marker = new google.maps.Marker({
                map : map,
                position : point,
                icon : icon.icon,
                shadow : icon.shadow
            });
            //store marker object in a new array
            markersArray.push(marker);
            bindInfoWindow(marker, map, infoWindow, html);


        }
            // set timeout after you finished processing & displaying the first lot of markers. Rember that requests on the server can take some time to complete. SO you want to make another one
            // only when the first one is completed.
            setTimeout(function() {
                downloadUrl("nwmxml.php", processXML);
            }, 5000);
    }

//clear existing markers from the map
function resetMarkers(arr){
    for (var i=0;i<arr.length; i++){
        arr[i].setMap(null);
    }
    //reset the main marker array for the next call
    arr=[];
}
    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);
    }

回答by Alejandro Esteban Cepeda Madar

setInterval(function() { 
    downloadUrl("conection/cargar_tecnicos.php", function(data) {

        var xml = data.responseXML;
         markers = xml.documentElement.getElementsByTagName("marker");
         removeAllMarkers();
        for (var i = 0; i < markers.length; i++) {
              var name = markers[i].getAttribute("name");
            var fecha = markers[i].getAttribute("fecha");
            var id_android = markers[i].getAttribute("id_android");
            var celular = markers[i].getAttribute("celular");
            var id = markers[i].getAttribute("id");
            var logo = markers[i].getAttribute("logo");
            var type = markers[i].getAttribute("type");
            var point = new google.maps.LatLng(
                    parseFloat(markers[i].getAttribute("lat")),
                    parseFloat(markers[i].getAttribute("lng")));

           var html = "<div class='infowindow'>"
                        +"<br/><div style='text-align:center;'><img src="+logo+"><br/>"    
                        +"<b>" + name + "</b></div><br/>"
                        +"<br/><label><b>Celular:</b></label>" + celular+""
                        +"<br/><label><b>Id Android:</b></label>" + id_android+""
                        +"<br/><label><b>Fecha y Hora:</b></label>" + fecha+""
                        +"<br/><br/><div style='text-align:center;'><a><input style=';' id='pop' type='image' value='"+id+"' class='ASD' img src='img/vermas.png' title='Detalles'/></a></div></div>";
            var icon = customIcons[type] || {};
             marker[i] = new google.maps.Marker({ 
                position: point,
                icon: icon.icon,
                shadow: icon.shadow,
                title:name
            });

            openInfoWindow(marker[i], map, infoWindow, html);   
          marker[i].setMap(map);
        }
    });

},10000);
}
function removeAllMarkers(){// removes all markers from map
    for( var i = 0; i < marker.length; i++ ){
            marker[i].setMap(null);
}
}