谷歌地图V3：更新标记定期 [英] Google Maps V3: Updating Markers Periodically

问题描述

我已经按照谷歌地图的PHP / MySQL的教程中的的这里

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

我想的标记，以从数据库中更新的，每5秒左右。

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

这是我的理解，我需要使用Ajax周期性更新的标志，但我挣扎明白的地方添加功能以及在何处使用的setTimeout（）等

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

所有我发现没有真正解释发生了什么其他的例子，一些有用的指导，将是了不起的！

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

这是我的code（同谷歌的例子有一些的无功修改）：

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

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!

推荐答案

请注意，我没有测试过这一点，因为我没有使用XML方便分贝

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

首先，你需要分割你的load（）函数到一个函数，用于初始化地图和放大器;加载在domready中的标记，并且以后将用它来处理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.

其次，你需要决定如何处理那些已经在地图上画标记。为了这个目的，你需要将它们添加到一个数组，你把它们添加到地图中。在第二次更新，你有一个选择，要么重绘标记（重建阵列），或者简单地更新现有的阵列。我的例子显示了这样一个场景，您只需从屏幕上清除旧的标记（这是比较简单）。

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);
    }

这篇关于谷歌地图V3：更新标记定期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！