Angular：使用firebase DB的传单更新标记位置答案

【问题标题】：Angular : leaflet update marker position using firebase DBAngular：使用firebase DB的传单更新标记位置
【发布时间】：2020-08-09 03:58:46
【问题描述】：

我正在尝试使用 Leaflet 地图和 firebase 数据库来检索坐标来构建 Angular 项目。一切正常。除了一件事。当我更新标记位置或从 firebase 数据库中删除时。标记没有更新。我必须重新加载页面才能获得新的标记位置。

首页TS：

export class Tab1Page implements OnInit {
  map: Map;
  comingData: AngularFireList<any>;

  constructor(public af: AngularFireAuth,public db: AngularFireDatabase) { }


  ngOnInit(){
     this.leafletMap();

  }
  // retrieve data from DB and init map 

 async leafletMap() {
    this.comingData = this.db.list("/towuser");
    this.comingData.snapshotChanges()
    .pipe(
      map(changes =>
        changes.map(c => ({ $key: c.payload.key, ...c.payload.val() }))
      )
    ).subscribe((a: any) => {

      console.log(a)
      
      if (a) {
       // init map 
        this.map = new Map('mapId').setView([33, 44], 7);
        tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        }).addTo(this.map);

       // marker icon
        var myIcon = icon({
          iconUrl: '../../assets/icon/truck.png',
          iconSize: [100, 35],
        });

        a.forEach(po => {
          if (po.pos) {


  //   init marker position from database
     const nantes = marker([po.pos.loc.lng,po.pos.loc.long], { icon: myIcon, }).addTo(this.map)
         
// marker Popup
         const customPopup = `
        <div style=" direction: rtl; text-align: right; ">
        <div style=" direction: rtl; text-align: right; ">
        <span style=" color: #42d77d; font-size: initial; ">
        <strong>نوع الكرين : </strong></span>
        <span style="font-size: initial; ">${po.profile.type}</span>
        </div>
        `
const customOptions = { 'className': 'custom-popup' }
  nantes.bindPopup(customPopup, customOptions).on('click', function (e) { this.openPopup() });

       nantes.setLatLng([po.pos.loc.lng,po.pos.loc.long]);

          }
        });

      }
    })

  }

}

如何在不重新加载页面的情况下更新标记位置或从 firebase 数据库中删除？

【问题讨论】：

标签： javascript angular firebase-realtime-database leaflet

【解决方案1】：

您要从地图中删除它吗？因为如果您只从地图中删除一个元素，您可能需要在函数末尾放置一个方法，使删除事件成为函数 leafletMap();

如果您只需要更新，请确保为相关标记配置事件 setLatLng(latlng)

【讨论】：

感谢您的回答。我检查了event setLatLng( latlng) 。但是标记仍然没有更新。我必须重新加载整个页面才能获得新位置

【解决方案2】：

终于，我解决了。我必须听取对 firebase 数据库的任何快照更改，以在不重新加载页面的情况下更新标记位置。

this.db.database.ref("/towuser/").on('child_changed', (t)=>{
  var markersRef =  this.db.database.ref("/towuser/"+t.key+"/").child("pos/")
  markersRef.on("child_added", (v)=>{
    let new_pos = v.val()
    marker.setLatLng([new_pos.lng,new_pos.long]).addTo(this.map)
    console.log(v.val())
  })
  markersRef.on("child_changed", (v)=>{
    console.log(v.val())
    
  })
  
})

【讨论】：