Next.js中如何基于数据库坐标为Leaflet地图添加多标记？

你当前的问题是把地点遍历逻辑放在了<MapContainer>外面，只渲染了文本div，没有和地图标记关联；同时地图里只有一个用固定position的标记。只需要把遍历逻辑移到地图容器内部，为每个地点生成独立的Marker即可。

修改后的完整代码如下：

<div>
  <MapContainer
    center={position} // 可保留原初始中心，或改用第一个地点的坐标作为初始中心
    zoom={13}
    scrollWheelZoom={true}
    style={{ height: 500 }}
    animate={true}
  >
    <TileLayer
      attribution='&copy; <a href="http://www.openstreetmap.org/copyright">'
      url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    {/* 遍历places数组，为每个地点生成对应的Marker */}
    {places.map((place) => (
      <Marker 
        key={place.id} 
        position={[place.latCoord, place.longCoord]} // Leaflet要求坐标格式为[纬度, 经度]，请确认你的字段顺序是否匹配
      >
        <Popup>
          {/* 可自定义弹窗内容，展示地点的具体信息 */}
          <div>
            <h3>地点ID: {place.id}</h3>
            <p>坐标: {place.latCoord}, {place.longCoord}</p>
          </div>
        </Popup>
      </Marker>
    ))}
  </MapContainer>
</div>

关键修改说明 #

• 移除原有的单个<Marker>，替换为places数组的遍历渲染
• 每个<Marker>的position使用当前地点的经纬度字段，注意Leaflet的坐标顺序是纬度在前，经度在后，如果你的字段顺序相反，需要调整为[place.longCoord, place.latCoord]
• 给每个Marker添加唯一key（使用place.id），符合React列表渲染的规范
• 弹窗内容可根据需求自定义，替换固定文本为地点的实际信息

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