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

【问题标题】：Polyline in google maps component react JS谷歌地图组件中的折线反应JS
【发布时间】：2018-11-09 15:20:30
【问题描述】：

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

【问题讨论】：

标签： reactjs google-maps-react

【解决方案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>

【讨论】：

【解决方案2】：

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

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

其中大部分未呈现的问题可能是因为它可能期望除 div 之外的其他内容。我没有使用过 react-native，但据我所知，它有用于移动设备的特殊组件。也许这可能会有所帮助

【讨论】：