0

我被困在反应传单中使用markercluster。我总是得到错误 Uncaught TypeError: Cannot read property '_zoom' of undefined，我已经添加了 markercluster.js，markercluster css 但仍然面临问题.. 这是我的代码

<MapContainer
  className={classes.borderRadiusCardPaper}
  center={position}
  zoom={4}
  scrollWheelZoom={true}
  worldCopyJump={true}
>
<TileLayer
  attribution='&copy; <a href="http://osm.org/copyright">GoogleMaps</a> contributors'
  url="https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}"
/>
<MarkerClusterGroup>
  {inisiatifDataFull.map((item) => (
    <div key={item.id}>
      <Marker
        icon={customMarkerLoc("images/markerrr.png")}
        position={[
          item.long,
          item.lat,
        ]}
      >
      <Popup>
        <table>
          <tr>
            <td style={{
              background:   "#8ab4f8",   
              padding:      "5px",
              borderRadius: "6px",
              fontWeight:   "bold",
              color:        "white",
              }}
            >Provisi
            </td>
            <td>{item.provinsiname}</td>
          </tr>
          <tr>
            <td style={{
              background:   "#8ab4f8",
              padding:      "5px",
              borderRadius: "6px",
              fontWeight:   "bold",
              color:        "white",
            }}
            >Kabupaten / Kota
            </td>
            <td>{item .kabupaten .length }</td>
          </tr>
          <tr>
                                <td
                                    style={{
                                        background:
                                            "#8ab4f8",
                                        padding:
                                            "5px",
                                        borderRadius:
                                            "6px",
                                        fontWeight:
                                            "bold",
                                        color: "white",
                                    }}
                                >
                                    Jumlah
                                    Insiatif
                                  </td>
                                <td>
                                    {
                                        item.provinsiname
                                    }
                                </td>
                            </tr>
                            <tr>
                                <td
                                    style={{
                                        background:
                                            "#8ab4f8",
                                        padding:
                                            "5px",
                                        borderRadius:
                                            "6px",
                                        fontWeight:
                                            "bold",
                                        color: "white",
                                    }}
                                >
                                    Jumlah
                                    Goal
                                  </td>
                                <td>
                                    {item.sdgs_goal.map(
                                        (
                                            item
                                        ) =>
                                            item
                                                .sdgs_goals
                                                .length
                                    )}
                                </td>
                            </tr>
                        </table>
                    </Popup>
                </Marker>
            </div>
        ))}



                     </MarkerClusterGroup>
</MapContainer>

我使用反应 16.2 反应传单 v3 然后传单 1.7.1

如果你有一个替代的标记集群库..让我知道..谢谢

4

0 回答 0