嘿，这个需求完全能实现！Leaflet本身虽然没有内置的同坐标标记聚合弹窗功能，但我们可以通过简单的数据处理+自定义逻辑轻松搞定它，下面是具体的实现思路和代码示例：

核心思路 #

1. 先给标记数据按坐标分组：把所有相同经纬度的标记内容归到同一组里
2. 为每组创建单个标记：每个坐标只生成一个Leaflet标记，然后把该组所有内容合并成弹窗绑定上去

具体实现步骤 #

1. 预处理标记数据，按坐标分组 #

假设你有一堆标记数据，每个包含纬度、经度和弹窗内容，我们可以用数组的reduce方法快速分组：

// 示例标记数据（替换成你自己的实际数据）
const markersData = [
  { lat: 51.505, lng: -0.09, content: "咖啡店A：拿铁¥28" },
  { lat: 51.505, lng: -0.09, content: "便利店B：24小时营业" },
  { lat: 51.506, lng: -0.08, content: "地铁站C：直达市中心" }
];

// 按经纬度字符串作为key，把同坐标的内容归为一组
const groupedMarkers = markersData.reduce((acc, marker) => {
  const coordKey = `${marker.lat.toFixed(6)},${marker.lng.toFixed(6)}`; // 保留6位小数避免精度问题
  if (!acc[coordKey]) {
    acc[coordKey] = {
      lat: marker.lat,
      lng: marker.lng,
      contentList: []
    };
  }
  acc[coordKey].contentList.push(marker.content);
  return acc;
}, {});

注意：这里用toFixed(6)处理经纬度是为了避免浮点数精度问题导致的“看似相同的坐标被判定为不同”的情况。

2. 创建聚合标记并绑定合并弹窗 #

遍历分组后的数据，每个坐标只创建一个标记，然后把该组所有内容合并成弹窗内容（比如用列表展示）：

// 初始化Leaflet地图
const map = L.map('map').setView([51.505, -0.09], 13);
// 添加瓦片图层（这里用OpenStreetMap的免费瓦片）
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

// 遍历分组数据，创建标记并绑定聚合弹窗
Object.values(groupedMarkers).forEach(group => {
  // 把所有内容合并成HTML列表
  const popupHtml = `
    <div style="max-width: 200px;">
      <h4>该位置的所有内容</h4>
      <ul>
        ${group.contentList.map(item => `<li>${item}</li>`).join('')}
      </ul>
    </div>
  `;
  
  // 创建标记并添加到地图
  L.marker([group.lat, group.lng])
    .addTo(map)
    .bindPopup(popupHtml);
});

3. 动态添加标记的场景处理 #

如果你的标记是动态添加的（比如从接口实时获取），可以维护一个坐标到标记实例的映射对象：

// 维护坐标到标记实例的映射
const markerMap = {};

function addDynamicMarker(lat, lng, content) {
  const coordKey = `${lat.toFixed(6)},${lng.toFixed(6)}`;
  
  if (markerMap[coordKey]) {
    // 该坐标已有标记，更新弹窗内容
    const existingPopup = markerMap[coordKey].getPopup();
    const currentContent = existingPopup.getContent();
    // 把新内容追加到现有弹窗里
    const newContent = currentContent.replace('</ul>', `<li>${content}</li></ul>`);
    existingPopup.setContent(newContent);
  } else {
    // 该坐标没有标记，创建新标记
    const popupHtml = `<ul><li>${content}</li></ul>`;
    const marker = L.marker([lat, lng])
      .addTo(map)
      .bindPopup(popupHtml);
    markerMap[coordKey] = marker;
  }
}

这样不管是静态数据还是动态添加的标记，都能实现同一坐标的内容合并到单个弹窗里啦！

内容的提问来源于stack exchange，提问作者Rhaom