英文:

react-map-gl library not rendering all maps

问题 {#heading}

我正在使用react-map-gl库在React中绘制地图。我有一个对象数组，用于显示一系列卡片，类似于这样：

<div>
  {properties.map((property) => ( 
    <PropertyCard key={property.id} property={property} />
  ))}
</div>

点击卡片时，会打开一个对话框，显示带有对象坐标的地图，类似于这样：

export const PropertyCard = ({property}:{property: PropertyInterface}) => {
	const [showMap, setShowMap] = useState(false);

	return (
		<>
			<div>{property.name}</div>
			<div>{property.address}</div>

			<button onClick={() => setShowMap(true)}>Show on map</button>

			<Dialog open={showMap} onClose={() => setShowMap(false)}>
				<Mapbox coordinates={property.coordinates} />
			</Dialog>
		</>
	);
};

问题在于，当卡片很多时，地图只会显示在其中一些上，其他卡片是空白的。我已经在geojson.io网站上测试了坐标，所有坐标都在那里工作。 英文:

I'm using react-map-gl library to plot maps in React. I have an array of objects that I use to display a list of cards, something like this:

<div>
  {properties.map((property) => ( 
    <PropertyCard key={property.id} property={property} />
  ))}
</div>

When clicking on the card, a dialog opens displaying the map with the object's coordinates, something like this:

export const PropertyCard = ({property}:{property: PropertyInterface}) => {
	const [showMap, setShowMap] = useState(false);

	return (
		<>
			<div>{property.name}</div>
			<div>{property.address}</div>

			<button onClick={() => setShowMap(true)}>Show on map</button>

			<Dialog open={showMap} onClose={() => setShowMap(false)}>
				<Mapbox coordinates={property.coordinates} />
			</Dialog>
		</>
	);
};

The problem is that when there are many cards, the map only appears on some of them, the others are blank. I already tested the coordinates on the geojson.io website and all the coordinates worked there.

答案1 {#1}

得分: 0

我有类似的问题，有一个限制可以呈现的地图数量，并且每个PropertyCard呈现不同的地图。

你可以从PropertyCard中移除Dialog，然后将其添加到父容器中，这样只会呈现一个地图。你只需要将坐标存储在状态中，以在地图上显示它。

以下是代码的示例：

• 父容器：

  export const Container = () => { const [showMap, setShowMap] = useState(false); const [coordinates, setCoordinates] = useState(null);

  return (
    <div>
      {properties.map((property) => (
        <PropertyCard 
          key={property.id} 
          property={property}
          setShowMap={setShowMap}
          setCoordinates={setCoordinates}
        />
      ))}
  
      <Dialog open={showMap} onClose={() => setShowMap(false)}>
        <Mapbox coordinates={coordinates} />
      </Dialog>
    </div>
  );
  

  };

• PropertyCard：

  type TPropertyCard = { property: PropertyInterface; setShowMap: (value: boolean) => void; setCoordinates: (value: any) => void; };

  export const PropertyCard = ({ property, setShowMap, setCoordinates }: TPropertyCard) => { return (

  {property.name}

  {property.address}

      <button
        onClick={() => {
          setCoordinates(property.coordinates);
          setShowMap(true);
        }}
      >
        Show on map
      </button>
    </div>
  );
  

  };

英文:

I had a similar problem, there is a limit on the amount of maps that can be rendered, and each PropertyCard renders a different map.

You can remove the Dialog from the PropertyCard and add it to the parent container, that way only one map is rendered. You just need to store the coordinates in a state to display it on the map.

Here is an example of what the code would look like.

• The parent container:

  export const Container = () => { const [showMap, setShowMap] = useState(false); const [coordinates, setCoordinates] = useState(null);

  return (
    <div>
      {properties.map((property) => (
        <PropertyCard 
          key={property.id} 
          property={property}
          setShowMap={setShowMap}
          setCoordinates={setCoordinates}
        />
      ))}
  
      <Dialog open={showMap} onClose={() => setShowMap(false)}>
        <Mapbox coordinates={coordinates} />
      </Dialog>
    </div>
    );
  

  };

• The PropertyCard:

  type TPropertyCard = { property: PropertyInterface; setShowMap: (value: boolean) => void; setCoordinates: (value: any) => void; };

  export const PropertyCard = ({ property, setShowMap, setCoordinates }: TPropertyCard) => { return ( <div> <div>{property.name}</div> <div>{property.address}</div>

      <button
        onClick={() => {
          setCoordinates(property.coordinates);
          setShowMap(true);
        }}
      >
        Show on map
      </button>
    </div>
  

  ); };