Я использую 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
, который был изменен, а затем обновил его местоположение на карте. Итак, какие изменения я должен внести в свой код?
Я использовал 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];
}
});
}