react-leaflet按官方文档配置后marker标记显示损坏问题求助

问题修复方案 #

这个问题是react-leaflet的常见兼容性问题，按以下步骤修改即可：

• 第一步：引入leaflet基础样式
  在组件顶部添加样式导入，缺失样式会直接导致marker布局错乱、显示损坏：

  import 'leaflet/dist/leaflet.css'
  

• 第二步：修正自定义图标路径写法
  不同构建工具对静态资源的导入规则不同，要对应修改路径获取逻辑：

  1. Webpack环境（比如create-react-app创建的项目）
     require返回的是模块对象，需要取.default属性拿到真实资源路径：

  const foodIcon = new L.icon({
    iconUrl: require('../images/makanan.png').default,
    iconSize: [35,45]
  })
  

  2. Vite环境
     Vite不支持require语法，需要先用import导入静态资源：

  // 组件顶部先导入
  import makananIcon from '../images/makanan.png'
  
  // 创建图标时直接使用
  const foodIcon = new L.icon({
    iconUrl: makananIcon,
    iconSize: [35,45]
  })
  

• 第三步：兜底兼容方案（可选）
  如果修改后还是有问题，可重写leaflet默认图标配置，避免内置图标资源路径冲突：

  delete L.Icon.Default.prototype._getIconUrl
  L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png').default,
    iconUrl: require('leaflet/dist/images/marker-icon.png').default,
    shadowUrl: require('leaflet/dist/images/marker-shadow.png').default
  })
  

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