使用 Firebase 更新谷歌地图上的特定标记

Question

我在我的网站上使用谷歌地图，基本上我想做的是在我的地图上显示标记，我从 Firebase 检索Drivers 的对象，然后我检索纬度和经度每个Driver 并将其显示在地图上。 所以我有两个问题：

1-每当每个Driver的经纬度变化时，我想更新他们在地图上的标记，不是所有的标记，只是那些得到的司机的标记他们的经纬度变了，我该怎么办？

2- 我知道 Firebase 中的 child_changed 返回已更改子项的快照，但如果假设同时更改了 100 个子项，会返回吗？所有 100 个孩子一次一个？

---

以下是我的一些代码示例：

此函数返回所有Drivers 并将它们显示为地图上的标记

    function getDrivers(){

     var database = firebase.database().ref().child('allDrivers');
     database.on('value',function(snapshot) {
        var array = [];
        snapshot.forEach(function(childSnapshot) {
          var childKey = childSnapshot.key;
          var childData = childSnapshot.val();
          array.push(childData);
        });
        for (var i = 0; i < array.length; i++) {
         var latlng = {lat: parseFloat(array[i].latPosition), lng: parseFloat(array[i].longPosition)};
         var marker = new google.maps.Marker({
           position: latlng,
           map: map,
           animation: google.maps.Animation.DROP,
           icon:'img/goodambulance.jpg'
         });    }  });

这不是最佳实践，因为一旦孩子发生变化，它将返回allDrivers 节点中的所有孩子，我只希望它返回已更改的孩子，然后更新其在地图上的位置。 那么我应该对我的代码进行哪些更改呢？

Answer 1

我使用child 事件侦听器而不是value，并创建了两个对象，相当于hashMap，它接受一个键和一个值 一个用于Drivers 对象，一个用于标记

var driversMap = {};
var markersMap = {};

在child_added 中，我将Drivers 对象和与之关联的唯一键放入了我的snapShot 中的snapShot 中driversMap

driversMap[childKey] = childData;

然后我检索纬度和经度并添加标记。 我还使用 id 将每个驱动程序的唯一键添加到它们的关联标记中

var latlng = {lat:parseFloat(driversMap[childKey].latPosition), lng: parseFloat(driversMap[childKey].longPosition)};

    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      animation: google.maps.Animation.DROP,
      icon: 'img/goodambulance.png',
      id: childKey
    });

最后，在child_changed 中，我得到了snapShot 中对象的键，并在driversMap 和markersMap 中搜索它，然后我删除了过时的驱动程序对象并将其重新添加到@987654337 @，然后我得到司机的经纬度并使用setPosition重新定位标记

delete driversMap[childKey];
driversMap[childKey] = childData;
      var latlng = {lat:parseFloat(driversMap[childKey].latPosition), lng: 
       parseFloat(driversMap[childKey].longPosition)};
      markersMap[childKey].setPosition(latlng);

这是完整的代码：

    function getDrivers(){
      var arr = [];
      var database = firebase.database().ref().child('allDrivers');
      database.on("child_added",function(snapshot){
        var childKey = snapshot.key;
        var childData = snapshot.val();
        driversMap[childKey] = childData;
        var latlng = {lat:parseFloat(driversMap[childKey].latPosition), lng: parseFloat(driversMap[childKey].longPosition)};
    
        var marker = new google.maps.Marker({
          position: latlng,
          map: map,
          animation: google.maps.Animation.DROP,
          icon: 'img/goodambulance.png',
          id: childKey
        });
        markersMap[marker.id] = marker;
    
      });
      database.on("child_changed",function(snapshot){
        var childData = snapshot.val();
        console.log(childData);
        var childKey = snapshot.key;
        if(childKey in driversMap && childKey in markersMap)
        {
          delete driversMap[childKey];
          driversMap[childKey] = childData;
          var latlng = {lat:parseFloat(driversMap[childKey].latPosition), lng: 
           parseFloat(driversMap[childKey].longPosition)};
          markersMap[childKey].setPosition(latlng);
          delete markersMap[childKey];
          
           }
      });
    
    }