尝试使用@react-google-maps 从数组中聚类标记时

Question

我正在尝试获取一组具有纬度/经度点的对象并Marker为每个对象创建一个，然后将这些Markers传递到一个<MarkerClusterer>组件中。通过直接复制这里的文档，我可以让它工作。然而，他们的方法与我需要的有点不同。区别似乎在于点如何映射到组件。工作代码：<MarkerClusterer      options={{imagePath:"https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"}}    >      {        (clusterer) => [          {lat: -31.563910, lng: 147.154312},          {lat: -33.718234, lng: 150.363181},          {lat: -33.727111, lng: 150.371124},          {lat: -33.848588, lng: 151.209834}        ].map((location, i) => (          <Marker            key={i}            position={location}            clusterer={clusterer}          />        ))      }    </MarkerClusterer>我的非工作代码：const listings = [    { lat: -31.56391, lng: 147.154312 },    { lat: -33.718234, lng: 150.363181 },    { lat: -33.727111, lng: 150.371124 },    { lat: -33.848588, lng: 151.209834 },  ];  let testArray = [];  for (let i = 0; i < listings.length; i++) {    let location = listings[i];    testArray.push(      <Pin position={location} id={i} key={i} clusterer={listings} />    );  }... <MarkerClusterer>    {testArray} </MarkerClusterer>这是一个带有示例的代码沙盒。代码在 Map2.js 下，区别在第 61 行。我无法弄清楚第一种方法在做什么，而我没有。也许聚类器参考？在这方面的任何帮助将不胜感激。