React Leaflet自定义Marker不显示且滚动偏移的修复方法咨询

你的问题核心是自定义的Marker组件没有和React Leaflet的地图系统绑定——你写的只是普通React组件，没有继承Leaflet Marker的定位、跟随逻辑，所以滚动地图时它不会同步移动，只会停在初始位置。

以下是两种可行的修复方案：

方案1：用React Leaflet的Marker包裹自定义内容 #

先把自己的标记组件改名（避免和Leaflet内置的Marker重名冲突），再用Leaflet官方的Marker组件包裹它，借助官方组件实现地图联动：

// 自定义标记内容组件，改名避免冲突
const CustomMarkerContent = () => {
  return (
    <div 
      className="marker"
      style={{ height: "30px", width: "30px", backgroundColor: "red" }}
    ></div>
  );
};

export default CustomMarkerContent;

修改Map组件，导入并使用Leaflet的Marker：

import { MapContainer, TileLayer, Marker } from 'react-leaflet';
import CustomMarkerContent from './CustomMarkerContent';

const Map = () => {
  const position = [51.505, -0.09];
  return (
    <div>
      <MapContainer
        center={position}
        zoom={13}
        scrollWheelZoom={false}
        style={{ height: "100vh", width: "100%" }}
      >
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        {/* 用Leaflet的Marker包裹自定义内容，实现联动 */}
        <Marker position={position}>
          <CustomMarkerContent />
        </Marker>
      </MapContainer>
    </div>
  );
};

export default Map;

方案2：通过icon属性自定义Marker样式 #

如果不想额外写组件，也可以用Leaflet的divIcon创建自定义图标，直接传给官方Marker的icon属性：

import { MapContainer, TileLayer, Marker } from 'react-leaflet';
import { divIcon } from 'leaflet'; // 导入divIcon工具

const Map = () => {
  const position = [51.505, -0.09];
  
  // 创建自定义div图标，可设置尺寸、锚点等属性
  const customMarkerIcon = divIcon({
    className: 'marker',
    html: '<div style="height:30px;width:30px;background-color:red;"></div>',
    iconSize: [30, 30], // 定义图标尺寸，确保定位准确
    iconAnchor: [15, 30] // 设置锚点（可选），让图标底部对准坐标点
  });

  return (
    <div>
      <MapContainer
        center={position}
        zoom={13}
        scrollWheelZoom={false}
        style={{ height: "100vh", width: "100%" }}
      >
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={position} icon={customMarkerIcon} />
      </MapContainer>
    </div>
  );
};

export default Map;

两种方案的核心逻辑一致：必须借助React Leaflet提供的Marker组件绑定地图的定位逻辑，不能用完全独立的自定义div组件替代。

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