React Leaflet地图中多个Marker标记无法正常渲染问题求助

• map 遍历无返回值：你在map回调函数中使用花括号包裹<Marker>组件，但没有显式添加return语句，导致遍历返回的数组全为undefined，没有任何组件被实际渲染。
• useEffect缺少依赖数组：当前useEffect没有传入第二个依赖参数，会在组件每次更新时重复触发接口请求、反复更新locationData，引发不必要的重渲染，干扰组件正常渲染逻辑。
• 未正确配置Leaflet默认标记图标：react-leaflet v3及以上版本不会自动处理默认标记图标的资源路径，如果没有手动配置图标，就算组件渲染成功也会看不到标记点，甚至会出现资源加载报错。
• 遗漏Leaflet样式文件导入：如果没有导入leaflet.css，地图和标记的样式都会出现异常。

1. 修正map遍历的返回逻辑 #

两种写法二选一即可：

• 隐式返回：去掉回调函数的花括号，用圆括号包裹组件

locationData.map(({_id, name, location, type}) => (
  <Marker position={[location.lat, location.long]} key={_id}></Marker>
))

• 显式添加return语句

locationData.map(({_id, name, location, type}) => {
  return <Marker position={[location.lat, location.long]} key={_id}></Marker>
})

2. 给useEffect添加空依赖数组 #

只在组件挂载时拉取一次数据，避免无限触发请求：

useEffect(() => {
  location.getAll().then(res => {
    setLocationData(res.data);
  })
}, []); // 空数组作为依赖

3. 配置默认Marker图标 #

在组件文件顶部导入Leaflet核心库，配置默认图标路径，同时导入样式文件：

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

// 修复默认图标路径问题
delete L.Icon.Default.prototype._getIconUrl;
// Webpack项目可直接用require引入本地node_modules内的资源
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

Vite项目可将require替换为import提前导入对应图片资源再赋值即可。

4. 可选：调整初始地图视图 #

你当前地图默认中心坐标是缅甸仰光区域，示例数据的谢菲尔德大学坐标在英国，默认zoom=13的情况下标记点会落在可视区域外，拉取数据后可以调用地图的panTo方法跳到对应坐标，方便调试查看。

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { useState, useEffect } from 'react';
import { MapContainer, TileLayer, Marker } from 'react-leaflet';
import { useStyles } from './你的样式文件路径';

// 配置默认Marker图标
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

const LeafletMap = () => {
  const classes = useStyles();
  const [locationData, setLocationData] = useState([]);

  useEffect(() => {
    location.getAll().then(res => {
      setLocationData(res.data);
    })
  }, []);

  return(
    <MapContainer className={classes.mapPane} center={[16.831374910711716, 96.15512062779219]} zoom={13} scrollWheelZoom={true}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {
        locationData.map(({_id, name, location, type}) => (
          <Marker position={[location.lat, location.long]} key={_id}></Marker>
        ))
      }
    </MapContainer>
  )
}

export default LeafletMap;

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