Question

我试图使用多段线在位置之间添加路线，但是，当我将div标记组件和多段线组件包装在div中时，都不会在地图上渲染。但是，当在相同的返回中返回两者时，我被迫将两者都包装在enclosing tag中，否则将引发错误。

我正在使用google-maps-react库和reactJS。

<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

AFAIK您可以在map循环内返回一个数组，但是必须为每个元素设置唯一键：

<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>

Answer 2

我认为这是可以预期的，因为react期望返回的jsx中仅存在一个顶级元素。因此，您应在反应时将其包装在类似 Fragment 的内容中。我不认为这是一个错误。正如@mateimihai所提到的，建议将关键属性传递给元素数组。

@ user2026178，如果这能解释您遇到的错误，请告诉我们。

其中大多数未渲染的问题可能是因为它可能期望除div之外的其他东西。我尚未使用react-native进行工作，但据我了解，它具有用于移动设备的特殊组件。可能有帮助

谷歌地图组件中的折线反应JS

2 个答案: