代码之家 › 专栏 › 技术社区 › Madpop

如何使用角度2停止设置间隔闪烁+

setinterval typescript angular javascript

Madpop · 技术社区 · 7 年前

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

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

这里的问题是数据何时更新或调用this。getMapData(),则贴图也会闪烁。是否可以在不闪烁div/map的情况下每30秒更新一次数据

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

1 回复 | 直到 7 年前

CruelEngine 7 年前

根据我们的讨论: inside the 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);
   }

所以首先它会检查标记是否 null 。如果是的话 无效的 然后创建一个新的标记对象。如果不是,则标记的位置将更改为动态 latlng 。

因此,地图闪烁问题将得到解决,因为只有标记位置在更改。同时拆下 this.deleteMarkers() 由于您现在正在更改位置,因此无需从地图中删除标记。

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

为此,请在服务内部执行以下操作:

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