Javascript 如何在不闪烁的情况下删除谷歌地图标记？

我试图以5秒的间隔通过ajax请求填充多个标记。一切正常，但每次通话间隔时，标记都会闪烁

我正在清除所有标记并在每次间隔呼叫时重新生成。我只想不眨眼地重新生成标记

而且，ajax请求可能会在每个间隔调用上返回不同的结果集

代码如下：

  var map;
  var places;
  var markers = [];
  var iw_map;
  var markers_map = new Array();

  function initialize() {
      geocoder = new google.maps.Geocoder();

      var latlngCenter = new google.maps.LatLng(25.1999721, 66.8354386);
      iw_map = new google.maps.InfoWindow();
      var mapOptions = {
          center: latlngCenter,
          zoom: 7,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      fetchPlaces();
      fitMapToBounds_map();
  }

  function fetchPlaces(cityId = null, hubId = null, riderId = null) {
    clearMarkers(); 
    $.ajax({
      url: '{{ route('get-markers') }}',
      method:'POST',
      data: {'city_id': cityId, hub_id: hubId, rider_id: riderId},
      dataType: 'json',
      cache: false,
      success: function(data) {

          // console.log(markers);

          var markerz = data.markers;

          // clearMarkers();

          $.each(markerz, function (i, dt) {

            var marker_icon = {url: dt.icon};
            var position = new google.maps.LatLng(dt.lat,dt.lng);
            var marker = new google.maps.Marker({
              map: map,
              position: position,
              icon: marker_icon
            });

            // newcoordinate = new google.maps.LatLng(dt.lat,dt.lng);

            google.maps.event.addListener(marker, "click", function(event) { 
              $.ajax({  
                  url: '{{ route('get-marker-info') }}',
                  method:'POST',
                  data: JSON.parse(dt.params),
                  success: function(data) {  
                      iw_map.setContent(data.infoBox);  
                      iw_map.open(map, marker);  
                  }  
              });
            });
            markers.push(marker.getPosition());
            markers_map.push(marker);
          });

          // fitMapToBounds_map();
      }  
    });

  }

  function fitMapToBounds_map() {
      var bounds = new google.maps.LatLngBounds();
      if (markers.length>0) {
          for (var i=0; i<markers.length; i++) {
              console.log(markers[i]);
              bounds.extend(markers[i]);
          }
          map.fitBounds(bounds);
      }
  } 

  function clearMarkers() {

    for (var i = 0; i < markers_map.length; i++) {
      markers_map[i].setMap(null);
    }

    markers_map = [];
  }

  function loadScript_map() {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false&v=3&libraries=places&callback=initialize";
      document.body.appendChild(script);
  }
  window.onload = loadScript_map;

  setInterval(fetchPlaces, 5000);

var map;
var places;
var markers_positions = [];
var markers = [];
var new_markers = [];
var iw_map;


function initialize() {
  geocoder = new google.maps.Geocoder();

  var latlngCenter = new google.maps.LatLng(25.1999721, 66.8354386);
  iw_map = new google.maps.InfoWindow();
  var mapOptions = {
    center: latlngCenter,
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  fetchPlaces();
  fitMapToBounds_map();
}

function fetchPlaces(cityId = null, hubId = null, riderId = null) {

  new_markers = [];

  $.ajax({
    url: '{{ route('get-markers') }}',
    method: 'POST',
    data: {
      city_id: cityId,
      hub_id: hubId,
      rider_id: riderId
    },
    dataType: 'json',
    cache: false,
    success: function(data) {

      $.each(data.markers, function(i, dt) {

        var marker_icon = {
          url: dt.icon
        };
        var position = new google.maps.LatLng(dt.lat, dt.lng);
        var marker = new google.maps.Marker({
          map: map,
          position: position,
          icon: marker_icon
        });

        google.maps.event.addListener(marker, "click", function(event) {
          $.ajax({
            url: '{{ route('get-marker-info') }}',
            method: 'POST',
            data: JSON.parse(dt.params),
            success: function(data) {
              iw_map.setContent(data.infoBox);
              iw_map.open(map, marker);
            }
          });
        });
        markers_positions.push(marker.getPosition());
        new_markers.push(marker);
        clearMarkers();
      });
    }
  });

}

function fitMapToBounds_map() {
  var bounds = new google.maps.LatLngBounds();

  for (var i = 0; i < markers_positions.length; i++) {
    console.log(markers_positions[i]);
    bounds.extend(markers_positions[i]);
  }
  map.fitBounds(bounds);
}

function clearMarkers() {

  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }

  markers = new_markers;
}

function loadScript_map() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false&v=3&libraries=places&callback=initialize";
  document.body.appendChild(script);
}
window.onload = loadScript_map;

setInterval(fetchPlaces, 5000);

var映射；
变量位置；
var标记=[]；
var iw_图；
var markers_map=新数组（）；
函数初始化（）{
geocoder=新的google.maps.geocoder（）；
var latlngCenter=new google.maps.LatLng（25.199972166.8354386）；
iw_map=new google.maps.InfoWindow（）；
变量映射选项={
中心：latlngCenter，
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map_canvas”），mapOptions）；
fetchPlaces（）；
fitMapToBounds_map（）；
}
函数fetchPlaces（cityId=null，hubId=null，riderId=null）{
clearMarkers（）；
$.ajax({
url:“{route（'get-markers'）}}”，
方法：'POST'，
数据：{'city\u id'：cityId，hub\u id:hubId，rider\u id:riderId}，
数据类型：“json”，
cache:false，
成功：功能（数据）{
//控制台日志（标记）；
var markerz=data.markers；
//clearMarkers（）；
$。每个（markerz，函数（i，dt）{
var marker_icon={url:dt.icon}；
var position=new google.maps.LatLng（dt.lat，dt.lng）；
var marker=new google.maps.marker({
地图：地图，
职位:职位,，
图标：标记图标
});
//newcoordinate=newgoogle.maps.LatLng（dt.lat，dt.lng）；
google.maps.event.addListener（标记，“单击”，函数（事件）{
$.ajax（{
url:“{route（'get-marker-info'）}}”，
方法：'POST'，
数据：JSON.parse（dt.params），
成功：函数（数据）{
iw_map.setContent（data.infoBox）；
iw_地图。打开（地图、标记）；
}  
});
});
markers.push（marker.getPosition（））；
markers_map.推送（marker）；
});
//fitMapToBounds_map（）；
}  
});
}
函数fitMapToBounds_map（）{
var bounds=new google.maps.LatLngBounds（）；
如果（标记长度>0）{
对于（var i=0；i这是未经测试的代码，因此可能需要进行一些调整

我用有意义的名称重命名了变量，并将逻辑更改为先添加新标记，然后删除旧标记

使用AJAX获取标记时，首先清空
new\u markers
数组，然后在地图上绘制标记，并将它们添加到
new\u markers
数组中。然后从地图中清除旧标记（
markers
数组）。第一次，此数组将为空，因此不会发生任何事情。将
新的\u标记
数组复制到
标记
数组。重复

代码如下：

  var map;
  var places;
  var markers = [];
  var iw_map;
  var markers_map = new Array();

  function initialize() {
      geocoder = new google.maps.Geocoder();

      var latlngCenter = new google.maps.LatLng(25.1999721, 66.8354386);
      iw_map = new google.maps.InfoWindow();
      var mapOptions = {
          center: latlngCenter,
          zoom: 7,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      fetchPlaces();
      fitMapToBounds_map();
  }

  function fetchPlaces(cityId = null, hubId = null, riderId = null) {
    clearMarkers(); 
    $.ajax({
      url: '{{ route('get-markers') }}',
      method:'POST',
      data: {'city_id': cityId, hub_id: hubId, rider_id: riderId},
      dataType: 'json',
      cache: false,
      success: function(data) {

          // console.log(markers);

          var markerz = data.markers;

          // clearMarkers();

          $.each(markerz, function (i, dt) {

            var marker_icon = {url: dt.icon};
            var position = new google.maps.LatLng(dt.lat,dt.lng);
            var marker = new google.maps.Marker({
              map: map,
              position: position,
              icon: marker_icon
            });

            // newcoordinate = new google.maps.LatLng(dt.lat,dt.lng);

            google.maps.event.addListener(marker, "click", function(event) { 
              $.ajax({  
                  url: '{{ route('get-marker-info') }}',
                  method:'POST',
                  data: JSON.parse(dt.params),
                  success: function(data) {  
                      iw_map.setContent(data.infoBox);  
                      iw_map.open(map, marker);  
                  }  
              });
            });
            markers.push(marker.getPosition());
            markers_map.push(marker);
          });

          // fitMapToBounds_map();
      }  
    });

  }

  function fitMapToBounds_map() {
      var bounds = new google.maps.LatLngBounds();
      if (markers.length>0) {
          for (var i=0; i<markers.length; i++) {
              console.log(markers[i]);
              bounds.extend(markers[i]);
          }
          map.fitBounds(bounds);
      }
  } 

  function clearMarkers() {

    for (var i = 0; i < markers_map.length; i++) {
      markers_map[i].setMap(null);
    }

    markers_map = [];
  }

  function loadScript_map() {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false&v=3&libraries=places&callback=initialize";
      document.body.appendChild(script);
  }
  window.onload = loadScript_map;

  setInterval(fetchPlaces, 5000);

var map;
var places;
var markers_positions = [];
var markers = [];
var new_markers = [];
var iw_map;


function initialize() {
  geocoder = new google.maps.Geocoder();

  var latlngCenter = new google.maps.LatLng(25.1999721, 66.8354386);
  iw_map = new google.maps.InfoWindow();
  var mapOptions = {
    center: latlngCenter,
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  fetchPlaces();
  fitMapToBounds_map();
}

function fetchPlaces(cityId = null, hubId = null, riderId = null) {

  new_markers = [];

  $.ajax({
    url: '{{ route('get-markers') }}',
    method: 'POST',
    data: {
      city_id: cityId,
      hub_id: hubId,
      rider_id: riderId
    },
    dataType: 'json',
    cache: false,
    success: function(data) {

      $.each(data.markers, function(i, dt) {

        var marker_icon = {
          url: dt.icon
        };
        var position = new google.maps.LatLng(dt.lat, dt.lng);
        var marker = new google.maps.Marker({
          map: map,
          position: position,
          icon: marker_icon
        });

        google.maps.event.addListener(marker, "click", function(event) {
          $.ajax({
            url: '{{ route('get-marker-info') }}',
            method: 'POST',
            data: JSON.parse(dt.params),
            success: function(data) {
              iw_map.setContent(data.infoBox);
              iw_map.open(map, marker);
            }
          });
        });
        markers_positions.push(marker.getPosition());
        new_markers.push(marker);
        clearMarkers();
      });
    }
  });

}

function fitMapToBounds_map() {
  var bounds = new google.maps.LatLngBounds();

  for (var i = 0; i < markers_positions.length; i++) {
    console.log(markers_positions[i]);
    bounds.extend(markers_positions[i]);
  }
  map.fitBounds(bounds);
}

function clearMarkers() {

  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }

  markers = new_markers;
}

function loadScript_map() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false&v=3&libraries=places&callback=initialize";
  document.body.appendChild(script);
}
window.onload = loadScript_map;

setInterval(fetchPlaces, 5000);

var映射；
变量位置；
var标记_位置=[]；
var标记=[]；
var新_标记=[]；
var iw_图；
函数初始化（）{
geocoder=新的google.maps.geocoder（）；
var latlngCenter=new google.maps.LatLng（25.199972166.8354386）；
iw_map=new google.maps.InfoWindow（）；
变量映射选项={
中心：latlngCenter，
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map_canvas”），mapOptions）；
fetchPlaces（）；
fitMapToBounds_map（）；
}
函数fetchPlaces（cityId=null，hubId=null，riderId=null）{
新的_标记=[]；
$.ajax({
url:“{route（'get-markers'）}}”，
方法：“POST”，
数据：{
城市id:cityId，
hub_id:hubId，
车手编号：riderId
},
数据类型：“json”，
cache:false，
成功：功能（数据）{
$.each（data.markers，function（i，dt）{
变量标记图标={
url:dt.icon
};
var position=new google.maps.LatLng（dt.lat，dt.lng）；
var marker=new google.maps.marker({
地图：地图，
职位:职位,，
图标：标记图标
});
google.maps.event.addListener（标记，“单击”，函数（事件）{
$.ajax({
url:“{route（'get-marker-info'）}}”，
方法：“POST”，
数据：JSON.parse（dt.params），
成功：功能（数据）{
iw_map.setContent（data.infoBox）；
iw_地图。打开（地图、标记）；
}
});
});
markers_positions.push（marker.getPosition（））；
新的_标记。推（标记）；
clearMarkers（）；
});
}
});
}
函数fitMapToBounds_map（）{
var bounds=new google.maps.LatLngBounds（）；
对于（变量i=0；i
首先设置新的标记，然后删除旧的标记？这实际上取决于客户端计算机的性能和正在加载的标记的数量。可能是您甚至看不到更改，或者“闪烁”可能比眨眼的时间长…同时可能有数千个标记。如果我删除（var I=0；I函数
的这一部分<