1

我正在尝试使用折线在位置之间添加路线，但是，当我将标记组件和折线组件包装在 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>
4

2 回答 2

0

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>
于 2018-11-13T11:32:33.937 回答
0

我认为这是意料之中的，因为 react 预计返回的 jsx 中只存在一个顶级元素。因此，您应该将其包装在Fragment on react 之类的东西中。我不认为这是一个错误。正如@mateimihai 提到的，建议将 key prop 传递给元素数组。

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

他们中的大部分没有渲染的问题可能是因为它可能期待除 div 以外的东西。我没有使用过 react-native，但据我所知，它有用于移动设备的特殊组件。可能这可能会有所帮助

于 2018-11-19T22:06:32.913 回答