Обновление определенных маркеров на картах Google с помощью Firebase

Question

Обновление определенных маркеров на картах Google с помощью Firebase

1

Я использую google-карты на своем веб-сайте, в основном то, что я пытаюсь сделать, это показать маркеры на моей карте, я извлекаю объект Drivers from Firebase, а затем получаю широту и долготу каждого Driver и дисплея это на карте. Поэтому у меня есть два вопроса:

1- Когда меняются широта и долгота каждого Driver, я хочу обновить их маркеры на карте, а не все маркеры, только маркеры тех драйверов, которые изменили свою широту и долготу, как я могу это сделать?

2- Я знаю, что child_changed в Firebase возвращает снимок ребенка, который был изменен, но что, если, скажем, 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 узле allDrivers, я просто хочу, чтобы он возвращал дочерний allDrivers, который был изменен, а затем обновил его местоположение на карте. Итак, какие изменения я должен внести в свой код?

Ahmed El Sherif 02 июнь 2017, в 23:42

Источник

Теги:

javascript

firebase

google-maps

google-maps-markers

firebase-realtime-database

1 ответ

Ещё вопросы

Ahmed El Sherif · Accepted Answer · 2017-06-02T21-30-00.000Z

Я использовал child прослушиватель событий вместо value и я создал два объекта, эквивалентных hashMap, который берет ключ и значение Один для объекта Drivers и один для маркеров

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

Внутри child_added я помещаю объект Drivers и связанный с ним уникальный ключ, который я извлек из 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 и 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];
          
           }
      });
    
    }