尝试使用@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 行。

我无法弄清楚第一种方法在做什么，而我没有。也许聚类器参考？在这方面的任何帮助将不胜感激。