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

Question

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

1- 每当每个 Driver 的纬度和经度发生变化时，我想更新他们在 map 上的标记，不是所有标记，只是标记对于那些改变了纬度和经度的司机，我该怎么做？

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

<小时/>

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

此函数返回所有驱动程序并将它们显示为 map 上的标记

    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 节点中的所有子项，我只想它返回已更改的子项，然后更新其位置在 map 上。 那么我应该在代码中进行哪些更改？

Answer 1

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

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

在 child_added 内部，我放置了 Drivers 对象以及与其关联的唯一键，这是我从 driversMap 内的 snapShot 检索到的

driversMap[childKey] = childData;

然后我检索纬度和经度并添加标记。 此外，我使用 id

将每个驱动程序的唯一 key 添加到其关联标记中

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< 中搜索它，然后我删除过时的驱动程序对象并将其重新添加到driversMap，然后我获取驱动程序的纬度和经度并使用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];
          
           }
      });
    
    }