javascript - 如何使用 angular 2+ 停止设置间隔闪烁

Question

我在这里显示动态数据，即谷歌地图上的纬度和经度，我在这里应用 setInterval() 下面是我的代码:

this.timer = setInterval(()=>{this.getMapData();},30000);

这里的问题是，每当数据更新或调用 this.getMapData() 时， map 也会闪烁。是否可以每 30 秒更新一次数据而不闪烁 div/map

getMapData() {
    this.spinner.show();
    this.serv.getMapData(this.ds, this.ln).subscribe(res => {
      this.spinner.hide();
      this.deleteMarkers();


      if (res.Data && res.Data.length > 0) {

        this.mapData = res.Data;
        console.log(JSON.stringify(this.mapData));


        if (this.mapData != null && this.mapData.length > 0) {
          for (var i = 0; i < this.mapData.length; i++) {
            var latlng = {lat: parseFloat(this.mapData[i].latitude), lng: parseFloat(this.mapData[i].longitude)};
            this.addMarker(latlng, this.mapObject, this.mapData[i].Name);
            this.markerName = this.mapData[i].Name;


          }
        }
      } else {

        this.toastr.error('No Data Found', 'Oops!');
      }

    },err=>{
      this.spinner.hide();
    });


  }




 addMarker(latlng, mapobj, markerLabel) {
    var marker = new google.maps.Marker({
      position: latlng,
      label: '',
      map: mapobj,
      animation: google.maps.Animation.DROP,
    });





var infowindow = new google.maps.InfoWindow({
  content: markerLabel
});

google.maps.event.addListener(marker, 'click', function() {
 // infowindow.open(Map,marker);
});



 infowindow.open(Map,marker);





   // This is for set postion for the marker after getting dynamic data it posittions to the point
   mapobj.setZoom(17);
   mapobj.panTo(marker.position);
    this.markers.push(marker);
  }



// Sets the map on all markers in the array.
  setMapOnAll(map) {
    for (var i = 0; i < this.markers.length; i++) {
      this.markers[i].setMap(map);

    }
  }

  // Removes the markers from the map, but keeps them in the array.
  clearMarkers() {
    this.setMapOnAll(null);
  }


  // Deletes all markers in the array by removing references to them.
  deleteMarkers() {
    this.clearMarkers();
    this.markers = [];
  }

Answer 1

根据我们的讨论:在 addMarker() 中，

if(this.marker != null){
    this.marker = new google.maps.Marker({
      position: latlng,
      label: '',
      map: mapobj,
      animation: google.maps.Animation.DROP,
    });
   }
   else{
     this.marker.setPosition(latlng);
   }

所以首先它会检查 marker 是否为 null 。如果它是 null 则创建一个新的 marker 对象。如果不是，则标记的位置更改为动态 latlng。

因此，您的 map 闪烁问题将得到解决，因为只有标记位置在变化。同时删除 this.deleteMarkers() 因为你现在正在改变位置，不需要从 map 中删除标记。

现在，您可以使用 rxjs 运算符 interval 来调用服务并在 30 秒或任何时间获取一次数据，而不是使用 setInterval。

为此，在您的服务中执行如下操作:

return Observable.interval(30000).flatMap(()=>{ 
  return this.http.get(url + data+'/LocationId='+ param).map(res => { 
     return res.json(); 
  }); 
)};

编辑

您需要以下导入:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/mergeMap`;