从Firebase获取经纬度后如何添加所有用户的标记而非仅最后一个

看起来你已经能从Firebase拿到每个司机的经纬度了，只是地图标记只显示最后一位——大概率是因为你在创建标记时复用了同一个变量，导致之前的标记被覆盖了。我给你调整下代码，确保每个用户都能生成独立的标记：

首先，假设你用的是Google Maps JavaScript API（如果是其他库，逻辑也差不多，只是API调用略有不同），先确保你已经初始化了地图实例：

// 先初始化地图，这个函数可以根据你的需求调整默认中心点和缩放级别
let map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 37.7749, lng: -122.4194}, // 示例：旧金山坐标，换成你需要的默认位置
    zoom: 12
  });
}

然后修改你的Firebase监听代码，重点是每次获取到新的经纬度就创建一个新的标记，还可以把标记存到数组里方便后续管理（比如移除、更新）：

$(document).ready(function(){
  // 先初始化地图
  initMap();
  
  // 用数组保存所有司机标记，方便后续操作
  const driverMarkers = [];
  
  const rootRef = firebase.database().ref().child("driversAvailable");
  
  // child_added会触发所有已存在的子节点，以及后续新增的子节点
  rootRef.on("child_added", snap => {
    // 从Firebase取出经纬度、名称、电话（这里假设你的节点里有name和phone字段）
    const lat = parseFloat(snap.child("l").child("0").val());
    const lng = parseFloat(snap.child("l").child("1").val());
    const name = snap.child("name").val();
    const phone = snap.child("phone").val();
    
    console.log(name, phone);
    // 在页面列表里添加司机信息
    $('ol').append(`<li>${lat} : ${lng} - ${name}</li>`);
    
    // 创建新的地图标记
    const marker = new google.maps.Marker({
      position: {lat, lng},
      map: map,
      title: name // 鼠标悬停时显示司机名称
    });
    
    // 可选：添加点击标记显示信息窗口的功能
    const infowindow = new google.maps.InfoWindow({
      content: `<div><strong>${name}</strong><br>联系电话: ${phone}</div>`
    });
    
    marker.addListener('click', () => {
      infowindow.open(map, marker);
    });
    
    // 把标记存入数组，方便后续移除或更新
    driverMarkers.push(marker);
  });
  
  // 可选：如果需要监听司机下线，移除对应的标记
  rootRef.on("child_removed", snap => {
    const removedName = snap.child("name").val();
    // 找到对应的标记并从地图上移除
    driverMarkers.forEach((marker, index) => {
      if (marker.title === removedName) {
        marker.setMap(null);
        driverMarkers.splice(index, 1);
      }
    });
  });
});

几个关键要点帮你避坑：

• 一定要把经纬度转成浮点数：从Firebase拿到的数值可能是字符串类型，直接传给地图API会报错，用parseFloat()转一下就好。
• 不要复用标记变量：每次child_added触发时都用const marker = new google.maps.Marker()创建新实例，这样每个标记都是独立的，不会被覆盖。
• 用数组管理标记：后续如果需要更新司机位置或者移除下线司机的标记，直接操作数组里的实例就很方便。

如果用的是Leaflet地图库，创建标记的代码改成这样就行：

const marker = L.marker([lat, lng]).addTo(map);
marker.bindPopup(`<strong>${name}</strong><br>联系电话: ${phone}`);

内容的提问来源于stack exchange，提问作者K132133 Syed Arsalan Hussain