Полилинии в компоненте Google Maps реагируют JS

Question

Я пытаюсь добавить маршрут между местоположениями, используя полилинию, однако, когда я оборачиваю компонент маркера и компонент полилинии в элемент div, они не отображаются на карте. Однако, когда я возвращаю оба в одном и том же возвращении, я вынужден enclosing tagв противном случае будет выдана ошибка.

я использую google-maps-react библиотека и реагировать

<Map item
                className="map-container"
                google={google}
                zoom={4}
                initialCenter={initialCenter}
                fullscreenControl={false}
                streetViewControl={false}
                mapTypeControl={false}
              >
                {Object.values(groups).map((location, index) => {
                  const latestLocation = _.first(getSortedLocationsFromGroup(location))
                  const dashPins =
                    `${window.location.origin}/imgs/icon-pin-purple.png`




              return (
                <Marker
                  key={index}
                  icon={dashPins}
                  onClick={this.onMarkerClick}
                  position={{
                    lat: latestLocation.coords.latitude,
                    lng: latestLocation.coords.longitude
                  }}
                />
      <Polyline
         path={[ { lat: 39.072515, lng: -84.116524 }, { lat: coords.latitude, lng: coords.longitude }]}
         options={{
           strokeColor: dataColors.purple,
           strokeOpacity: 1,
           strokeWeight: 4,
           offset: '0%',
           icons: [
             {
               strokeWeight: 2,
               icon: nodeOnLine,
               offset: '0%',
               repeat: '35px'
             }
           ]
         }}
       />
              )
            })}
          </Map>

Answer 1

Я думаю, что это ожидаемо, потому что реакция ожидает, что только один элемент верхнего уровня будет присутствовать в возвращенном jsx. Таким образом, вы должны обернуть его внутри что-то вроде фрагмента при реакции. Я не думаю, что это ошибка. Как упомянул @mateimihai, рекомендуется передавать ключевую подпорку массиву элементов.

@ user2026178, пожалуйста, дайте нам знать, если это объясняет ошибку, с которой вы столкнулись.

Проблема с большими из них не рендеринг может быть потому, что он может ожидать чего-то другого, чем div. Я не работал с Reaction-native, но, насколько я понимаю, в нем есть специальные компоненты для мобильных устройств. Возможно, это может помочь

Answer 2

AFAIK вы можете вернуть массив внутри цикла карты, но вы должны установить уникальные ключи для каждого элемента:

<Map item
     className="map-container"
     google={google}
     zoom={4}
     initialCenter={initialCenter}
     fullscreenControl={false}
     streetViewControl={false}
     mapTypeControl={false}>

     {Object.values(groups).map((location, index) => {

         const latestLocation = _.first(getSortedLocationsFromGroup(location));
         const dashPins = `${window.location.origin}/imgs/icon-pin-purple.png`;

         return [
             <Marker key={'marker-' + index}
                     icon={dashPins}
                     onClick={this.onMarkerClick}
                     position={{
                        lat: latestLocation.coords.latitude,
                        lng: latestLocation.coords.longitude
                     }} />,
             <Polyline key={'polyline-' + index}
                       path={[
                           { lat: 39.072515, lng: -84.116524 },
                           { lat: coords.latitude, lng: coords.longitude }
                       ]}
                       options={{
                           strokeColor: dataColors.purple,
                           strokeOpacity: 1,
                           strokeWeight: 4,
                           offset: '0%',
                           icons: [
                               {
                                   strokeWeight: 2,
                                   icon: nodeOnLine,
                                   offset: '0%',
                                   repeat: '35px'
                               }
                           ]
                       }} />
          ]
    })}
</Map>