Question

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

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

谷歌地图 - 定期更新标记

1 个答案: