自v2.0.0起如何将props传递给React Leaflet.markercluster选项？

debugcn 发表于 Dev

马吉克

我试图通过财产 <MarkerClusterGroup {...markerclusterOptions}>

通过，let markerclusterOptions但我认为这不是一个好方法，因为它不起作用！

在文档中（＃React Leaflet markercluster v2.0.0）：从现在开始，您无需使用options prop将Leaflet.markercluster选项传递到中<MarkerClusterGroup />。

我不知道该怎么做。

import React from 'react';
import MarkerClusterGroup from 'react-leaflet-markercluster';

let markerclusterOptions: {
  maxClusterRadius: 10;
  spiderfyDistanceMultiplier: 2;
  spiderfyOnMaxZoom: true;
  showCoverageOnHover: false;
  zoomToBoundsOnClick: true;
};
// == Composant
const Map: React.FC<Props> = ({ lights }) => (
  <div className="map">
    <MapContainer
      center={[46.362205, 1.523151]}
      zoom={5}
      minZoom={2}
    >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png?api_key=******"
      />
      <SetViewOnClick />

      <MarkerClusterGroup {...markerclusterOptions}>{
        
        lights.map((light) => (
          <Marker
            key={light.id}
            position={[light.latitude, light.longitude]}
            icon={iconPerson}
            
          >
            <Tooltip>
              Name: {light.user_description} (I{light.index}.G{light.group})
              <br />
              Power: {light.power_level} %
              <br />
              Rf Quality: {light.rfquality}/5
            </Tooltip>
          </Marker>
        ))       
      }
      </MarkerClusterGroup>

    </MapContainer>

  </div>
);

export default Map;

吉卜赛人

最有可能是错字：

let markerclusterOptions: { // with colon ":" you declare a type
  maxClusterRadius: 10;
  spiderfyDistanceMultiplier: 2;
  spiderfyOnMaxZoom: true;
  showCoverageOnHover: false;
  zoomToBoundsOnClick: true;
}; // no assignment, value is undefined

本来应该：

let markerclusterOptions = { // with equal you assign a value
  maxClusterRadius: 10,
  spiderfyDistanceMultiplier: 2,
  spiderfyOnMaxZoom: true,
  showCoverageOnHover: false,
  zoomToBoundsOnClick: true,
};

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。