javascript - 谷歌地图 - 定期更新标记

Question

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

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 = [];
}

Answer 1

步骤如下:

• 获取 map 中没有的最新标记并将其添加:

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