this.props.children не является функцией при попытке кластеризовать маркеры из массива с помощью @ реагировать-google-maps - PullRequest
Новая
       37

this.props.children не является функцией при попытке кластеризовать маркеры из массива с помощью @ реагировать-google-maps

1 голос
/ 13 июня 2019

Я пытаюсь взять массив объектов с точками широты и долготы и создать Marker для каждого, а затем передать эти Marker s в компонент <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.

Я не могу понять, что делает первый подход, а я нет. Может быть, ссылка на кластер? Любая помощь в этой области будет принята с благодарностью.

1 Ответ

2 голосов
/ 14 июня 2019

Компонент <MarkerClusterer> требует функции в качестве дочернего элемента. Эта функция будет вызываться функцией рендеринга компонента <MarkerClusterer>. Во втором случае вы передаете массив как дочернюю опору. Следовательно, MarkerClusterer пытается вызвать ваш массив как функцию (testArray()) и, следовательно, терпит неудачу.

это должно работать 

<MarkerClusterer
  options={{
    imagePath:
      "https://developers.google.com..."
  }}
>
  {clusterer =>
    listings.map((location, i) => (
      <Pin key={i} position={location} clusterer={clusterer} />
    ))
  }
</MarkerClusterer>

Это известно как реквизит рендера в реактивном мире. Прочитайте здесь для более подробной информации.

...