谷歌地图 - 定期更新标记答案

【问题标题】：google maps - updating markers periodically谷歌地图 - 定期更新标记
【发布时间】：2015-11-30 18:24:31
【问题描述】：

已按照 googlemapsapi 教程显示标记，现在希望定期添加它们。看过Google Maps V3: Updating Markers Periodically，但我只得到了地图，没有显示任何标记......我的代码如下......

function load() {
     //map object
      var map = new google.maps.Map(document.getElementById("map"), {
        center: {lat: 54.870902, lng: -6.300565}, 
        zoom: 14
      });
      //first call to get and process initial data
      downloadUrl("Map.php", processXML);
  }
     function processXML(data){
     //method to retrieve information via ajax
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        //clear markers before adding new ones
        resetMarkers(markersArray);

        for(var i =0; i<markers.length; i++){
            var point = new google.maps.LatLng(
                    parseFloat(markers[i].getAttribute("lat")),
                    parseFloat(markers[i].getAttribute("lng")));
            var marker = new google.maps.Marker({
                map:map,
                position: point
            });
            //store marker object in new array
            markersArray.push(marker);
            marker.setMap(map);

    }
    //set timeout
    setTimeout(function() {
        downloadUrl("Map.php", processXML);
    }, 1000);

}

//cleatr existing markers from map
function resetMarkers(arr){
    for(var i = 0; i<arr.length; i++){
        arr[i].setMap(null);
    }
    //reset the main marker array
    arr = [];
}

【问题讨论】：

如果显示一些 javascript 错误，请在控制台中检查
不是答案，但希望值得研究。 rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/…。如需完整文档，请ngmap.github.io

标签： javascript google-maps google-maps-api-3

【解决方案1】：

步骤如下：

获取地图中没有的最新标记并添加：

var marker = new google.maps.Marker({
    position: locations[i].latlng,
    map:map,
    title:locations[i].hour
});
markers.push(marker);
bounds.extend(locations[i].latlng);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(
         '<strong>Data: ' + locations[i].Data + '<br>Hour: ' + locations[i].hour + '<br></strong>Aproximate speed: ' + locations[i].speed + ' K/H<br>Aproximate radius: ' + locations[i].radius + ' meters <br>ISP: ' + locations[i].isp+ '<br>Latitude: ' + locations[i].latlng
      );
      infowindow.open(map, marker);
    }
})(marker, i));

最后通过setInterval更新它，正如上面每个人所说的：

var map;
var markers = [];

setInterval(refreshMap, 3000);

function initialize() {
  var mapOptions = {
      zoom: 12,
      center: new google.maps.LatLng(54.870902,-6.300565),
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var locations = [];

  $.get("getmarkers.php", function(response){
    for(var i = 0; i < response.markers.length; i++) {
      var marker = response.markers[i];
      var myMarker = {
        Data: marker.Data,
        latlng: new google.maps.LatLng(marker.lat, marker.lon),
        hour: marker.hour,
        radius: marker.radius,
        isp: marker.isp,
        speed: marker.speed
      };

      locations.push(myMarker);
      addMapMarker(myMarker);
    }
  },'json');

  markerClusterer = new MarkerClusterer(map, markers, {
    maxZoom: 16,
    gridSize: 60
  });
  map.fitBounds(bounds);
}

【讨论】：

【解决方案2】：

首先，我不知道是你的代码还是格式，但是括号似乎有点不对，for循环的结束{是否丢失？

事实上，我知道 setTimeout 在 processXML() 函数中，所以它应该被递归调用，对吧？如果是这样，请检查您的控制台是否有错误并检查右括号。

如果否，请将 setTimeout 更改为 setInterval，以便每隔 1 秒调用一次。

【讨论】：

【解决方案3】：

这对我有用 - 只需遍历数组中包含的标记，但 setTimeout 在每次迭代之间暂停......

//store marker object in new array
                markersArray.push(marker);
        }         
              //update markers periodically
              for (var x = 0; x < markersArray.length; x++) {
                setTimeout(function(y) {
                    markersArray[y].setMap(MY_MAP);         
                }, x*10000, x); 
            }

【讨论】：