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

Question

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

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

2- 我知道 Firebase 中的 child_changed return 是已更改的 child 的快照，但是如果让我们假设 100 child 同时更改， 会 return 所有 100 child 一次一个 吗？

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

此函数 return 所有 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'
         });    }  });

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

Answer 1

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

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

在 child_added 里面，我把 Drivers object 和我从 snapShot 中检索到的与之关联的唯一键放在 driversMap

driversMap[childKey] = childData;

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

将每个 driver 的唯一键添加到它们的关联标记中

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 中 object 的密钥，并在 driversMap 和 markersMap 中搜索它，然后我把过时的driverobject和re-add删掉到driversMap，然后得到driver的经纬度，用setPosition re-position 标记

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];
          
           }
      });
    
    }

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

Updating specific markers on google maps with Firebase

javascript

google-maps

google-maps-markers

firebase

firebase-realtime-database