Question

这里我在谷歌地图上显示动态数据，即lat和long，这里我应用下面的setInterval（）是我的代码：

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

这里的问题是，当数据更新或调用this.getMapData（）时，地图也会闪烁。是否可以每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

根据我们的讨论： 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。如果它是null，则会创建一个新的标记对象。如果没有，则标记的位置将更改为动态latlng。

因此，只有标记位置发生变化时才会解决地图闪烁问题。当你正在改变位置时也删除this.deleteMarkers()，不需要从地图中删除标记。

现在，您可以使用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`;

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

1 个答案: