TypeError React-Leaflet：无法读取 null

问题描述

当我单击标记时，会出现此错误。在我添加自定义图标之前一切都很好。但现在它根本不显示弹出窗口。

自定义图标：

const MapSection = () => {
  const customIcon = new L.Icon({
    iconUrl: '../marker.svg',iconRetinaUrl: '../marker.svg',iconAnchor: null,popupAnchor: null,shadowUrl: null,shadowSize: null,shadowAnchor: null,iconSize: new L.Point(50,65),className: 'leaflet-div-icon',});

标记代码：

<MarkerClusterGroup>
  {markerData.map((singleMarker) => (
    <Marker icon={customIcon} position={[singleMarker.lat,singleMarker.long]}>
      <Popup className={classes.popup}>
        {/* <Typography>موسسه دکتر شیری جلالی</Typography> */}
        <MapCard id={singleMarker.organization_id} />
      </Popup>
    </Marker>
  ))}
</MarkerClusterGroup>;

错误：

  52 | 
  53 | _add: function (point) {
  54 |  // destructive,used directly for performance in situations where it's safe to modify existing point
> 55 |  this.x += point.x;
     | ^  56 |  this.y += point.y;
  57 |  return this;
  58 | },

解决方法

@Falk Design 说了。 Leaflet 不知道将标记的图标（或图标阴影、弹出窗口等）相对于 latLng 锚定在何处。这取决于值 iconAnchor、popupAnchor、shadowUrl、shadowSize、shadowAnchor 需要有值。如果没有值，传单会查找 x 的 y 和 null，因此出现错误。