我想显示有关这些标记的所有信息，这些标记出现在同一个地方

Question

我需要在标记内显示多个名称 - >弹出带有医生姓名及其自己的 url。 但是现在，如果 map 中的地址相同，则即使多个医生可以在同一个地方，也只会出现一个标记。 所以我想知道该地址被调用了多少次，并且我想显示有关这些标记的所有信息，这些标记出现在同一个地方。

function DoctorsMap({ doctors_list, alternative_list, center, i18n }) {
  console.log(alternative_list)
  const iconMarkup = renderToStaticMarkup(
    <img src={config.domainUrl + "/src/client/assets/images/marker-icon.png"} />
  );
  const customMarkerIcon = divIcon({
    html: iconMarkup,
    iconSize: [25, 41],
    iconAnchor: [12, 41],
  });
  return (
    <MapContainer
      id={"map"}
      center={center}
      zoom={8}
      style={{
        marginBottom: "20px",
        width: "100%",
        height: "100vh",
        zIndex: 0,
      }}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <UpdateMapCentre mapCentre={center} />
      {doctors_list &&
        doctors_list.length > 0 &&
        doctors_list.map((item, index) => {
          return (
            item.office_address.length > 0 &&
            item.office_address.map((el, i) => {
              return (
                el.latitude &&
                el.longitude && (
                  <Marker
                    key={index + i}
                    // icon={new Icon({iconUrl: markerIconPng, iconSize: [25, 41], iconAnchor: [12, 41]})}
                    icon={customMarkerIcon}
                    position={[el.latitude, el.longitude]}
                  >
                    <Popup>
                      <Link to={"/profile/" + (i18n.language == 'FR' ? item.url : item['url_'+i18n.language.toLowerCase()])}>{item.name}</Link>

                     //for example I want several links here


                    </Popup>
                  </Marker>
                )
              );
            })
          );
        })}
      
    </MapContainer>

Answer 1

这个Demo演示了如何将overlay-marker-spiderfier-leaflet集成到react-leaflet中。

Answer 2

完整示例更新 - 工作示例位于https://codesandbox.io/s/markercluster-react-custom-icon-forked-x1hglq?file=/src/styles.css:95-128

function UpdateMapCentre(props) {
  const map = useMap();
  map.panTo(props.mapCentre);
  return null;
}

const createClusterCustomIcon = function (cluster) {
  return L.divIcon({
    html: `<span>${cluster.getChildCount()}</span>`,
    className: "customMarker",
    iconSize: L.point(40, 40, true)
  });
};

function DoctorsMap({ doctors_list, alternative_list, center, i18n, zoom }) {

  const iconMarkup = renderToStaticMarkup(
    <img src={config.domainUrl + "/src/client/assets/images/marker-icon.png"} />
  );
  const customMarkerIcon = divIcon({
    html: iconMarkup,
    iconSize: [25, 41],
    iconAnchor: [12, 41],
  });



   
  return (
    <MapContainer
      id={"map"}
      className="markercluster-map"
      center={center}
      zoom={zoom}
      style={{
        marginBottom: "20px",
        width: "100%",
        height: "100vh",
        zIndex: 0,
      }}
    >
     
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />

      <UpdateMapCentre mapCentre={center} />  
      <MarkerClusterGroup
        showCoverageOnHover={true}
        icon={customMarkerIcon}
         iconCreateFunction={createClusterCustomIcon}
      >
      {doctors_list &&
        doctors_list.length > 0 &&
        doctors_list.map((item, index) => {
         
          return (
            item.office_address.length > 0 &&
            item.office_address.map((el, i) => {
            
              return (
                el.latitude &&
                el.longitude && (

                
                  <Marker
                    key={index + i}
                    // icon={new Icon({iconUrl: markerIconPng, iconSize: [25, 41], iconAnchor: [12, 41]})}
                    icon={customMarkerIcon}
                    position={[el.latitude, el.longitude]}
                    draggable={true}
                    animate={true}
                  >
                   
                    <Popup>
                       {console.log("marker",item.name)}
                      <Link to={"/profile/" + (i18n.language == 'FR' ? item.url : item['url_'+i18n.language.toLowerCase()])}>{item.name}</Link>
                       
                       
                    </Popup>
                  </Marker>
                
                )
                
              );
            })
          );
        })}
        </MarkerClusterGroup>  
        <MarkerClusterGroup
        showCoverageOnHover={true}
        icon={customMarkerIcon}
         iconCreateFunction={createClusterCustomIcon}
      >
      {alternative_list &&
        alternative_list.length > 0 &&
        alternative_list.map((item, index) => {
          return (
            item.office_address.length > 0 &&
            item.office_address.map((el, i) => {
              return (
                el.latitude &&
                el.longitude && (
              
                  <Marker
                   id="maker"
                    key={index + i}
                    // icon={new Icon({iconUrl: markerIconPng, iconSize: [25, 41], iconAnchor: [12, 41]})}
                    icon={customMarkerIcon}
                    // eventHandlers={{
                    //   click: (e) => this.clickMarker(e),
                    // }}
                    position={[el.latitude, el.longitude]}
                    draggable={true}
                    animate={true}
                  >
                    
                    <Popup>
                     {/* { console.log("item.url ",item.url )} */}
                      <Link id="linkss" to={"/profile/" + (i18n.language == 'FR' ? item.url : item['url_'+i18n.language.toLowerCase()])}>{item.name}</Link>
                    </Popup>
                  </Marker>
                  
                )
              );
            })
          );
        })}
        </MarkerClusterGroup>
    </MapContainer>