javascript - 使用Firebase更新Google map 上的特定标记

我在网站上使用Google地图，基本上我想做的是在地图上显示标记，我从Firebase检索Drivers对象，然后检索每个并将其显示在地图上。所以我有两个问题：1-每当每一个Driver的纬度和经度发生变化时，我都希望更新其在地图上的标记，而不是所有标记，而是只是更改了其经度和纬度的那些驾驶员的标记，我该怎么做？2-我知道Firebase中的Driver返回一个已更改子级的快照，但是，如果假设一次更改了100个子级，那么一次会返回所有100个子级吗？这是我的代码的一些示例：此函数返回所有child_changed并将其显示为地图上的标记 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' }); } });这不是最佳做法，因为一旦子项更改，它将返回Drivers节点中的所有子项，我只希望它返回已更改的子项，然后更新其在地图上的位置。那么我应该对代码进行哪些更改？ (adsbygoogle = window.adsbygoogle || []).push({}); 最佳答案 我使用了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中对象的键，并在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]; } }); } (adsbygoogle = window.adsbygoogle || []).push({});