TypeError React-Leaflet：无法读取 null 的属性 'x'

Question

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

自定义图标：

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 | },

Answer 1

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

Answer 2

Leaflet 不知道相对于 latLng 在哪里锚定标记的图标（或图标阴影、弹出窗口等）。即由iconAnchor、popupAnchor、shadowUrl、shadowSize、shadowAnchor需要有值的值决定。如果没有值，传单将查找 null 的 x 和 y，因此会出现错误，或者您可以简单地从地图对象中删除 iconAnchor、popupAnchor：

let locationIcon = new L.Icon({
iconUrl: mapMarker,
iconRetinaUrl: mapMarker,
// iconAnchor: ['35.739212', '51.412767'],
// popupAnchor: null,
shadowUrl: null,
shadowSize: null,
shadowAnchor: null,
iconSize: new L.Point(35, 45),
className: 'location-icon',
  })
 return (
      <Marker
      position={[item.lat, item.lng]}
      icon={locationIcon}
      
      // interactive={false}
      key={item.merchantId}
      eventHandlers={{
        click: (e) => {
          console.log('marker clicked', e)
          handleShowDetails(item)
        }
      }}
    >

TypeError React-Leaflet：无法读取 null 的属性 'x'

TypeError React-Leaflet: Cannot read property 'x' of null

javascript

leaflet

react-leaflet

TypeError React-Leaflet：无法读取 null 的 属性 'x'

TypeError React-Leaflet: Cannot read property 'x' of null

javascript

leaflet

react-leaflet

TypeError React-Leaflet：无法读取 null 的属性 'x'