Question

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

我正在清除所有标记并在每次间隔调用时再次重新生成。我只想重新生成标记而不会闪烁。

此外，ajax请求有可能在每个间隔调用中返回不同的结果集。

以下是代码：

console.log(m.format())
// 2019-07-02T00:00:00Z

Answer 1

这是未经测试的代码，因此可能需要进行一些调整。

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

使用AJAX获得标记时，请先清空new_markers数组，然后在地图上绘制标记，然后将其添加到new_markers数组中。然后从地图（markers数组）中清除旧标记。第一次，此数组将为空，因此将不会发生任何事情。将new_markers数组复制到markers数组。重复。

代码如下：

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

如何删除Google Map Marker而不会闪烁？

1 个答案: