React-Map-GL：悬停时如何将地图标记升至顶部？

Question

我正在使用react-map-gl，我正在地图中渲染标记。我也有一些悬停动画，到目前为止，动画只是 css，除非你点击一个标记（虽然这个问题并不重要）。

所以，这就是它的外观：

在标记悬停时：

到目前为止，它可以按我的意愿工作，而且看起来很整洁。

但正如您所见，在地图中间，我有一组标记，它们彼此靠近。当我将其中一个悬停在背景中时，它看起来像这样：

如您所见，它不会将自己置于其他标记的顶部，这是所希望的。

这是悬停时的 CSS：

.pointer {
  transform-origin: bottom center;
  width: 40px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom:0;
  transform: translateX(-50%);

  &:hover {
    animation-name: bounce;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    z-index: 1000;

    + .text {
      animation-name: bounce-text;
      animation-duration: .4s;
      animation-fill-mode: forwards;
      animation-delay: .2s;
    }
  }
}

如您所见，我试图在悬停时将 z-index 提高到 1000，但它没有效果。可能是因为每个 <Marker/> 都是绝对定位的，并且可能有自己的 z-index 堆栈。

这是标记循环的 Javascript：

<ReactMapGl
  ref={mapEl}
  {...viewPort}
  onViewportChange={(_viewport:any) => setViewport(_viewport)}
  mapboxApiAccessToken={mapboxToken}
  mapStyle="mapbox://styles/mapbox/satellite-v9"
  style={{position:'relative', zIndex: '1'}}
>
  {mapData.markerCategories.map((markerCategory, i) => 
  
  <React.Fragment key={i}>
    {markerCategory.markers.map((marker, i) => <Marker
      latitude={marker.position[0]}
      longitude={marker.position[1]}
      key={i}
    >
        <Pointer viewPort={viewPort} marker={marker} markerCategory={markerCategory} setViewport={(viewPort:any) => setViewport(viewPort)}/>
    </Marker>)}

  </React.Fragment>
  )}

</ReactMapGl>

<Pointer/> 组件基本上是每个带有 svg 和 CSS 的图形图标。

我找不到解决方案。所以我的问题是，如何通过 CSS（首选）或 JavaScript 在每次悬停时将标记升到顶部？

Answer 1

好的，这个问题没有大量的回复。 :) 但我已经解决了它的“反应方式”。由于我无法通过 CSS 修复它，我使用了一个钩子 ([markerCategories, setMarkerCategories]) 并在悬停时重新构建类别和标记的数组，通过这样做，悬停的标记到达顶部，因为组件正在重新渲染改变数组。

const [markerCategories, setMarkerCategories] = useState(mapData.markerCategories);

<React.Fragment key={catIndex}>
  {markerCategory.markers.map((marker, markerIndex) => <Marker
    latitude={marker.position[0]}
    longitude={marker.position[1]}
    key={markerIndex}
  >
    <Pointer 
      viewPort={viewPort} 
      marker={marker} 
      markerCategory={markerCategory} 
      setViewport={(viewPort:any) => setViewport(viewPort)}
      onMouseEnter={() => setMarkerCategories([
        ...markerCategories.filter(item => item.type !== markerCategory.type),
        {
          ...markerCategory,
          markers: [
            ...markerCategory.markers.filter((item:any) => item.position !== marker.position),
            marker
          ]
        }
      ])}
    />
  </Marker>)}

神奇之处在于onMouseEnter 函数，我将类别和标记/指针放在其数组的最后。 React 通过这个新的数组顺序神奇地重新渲染标记，并且当前标记位于顶部。以同样的方式有点凌乱和美丽。 :)

有点过头了，但供将来参考；这就是 mapData 从一开始的结构（是的，它只是虚拟数据）：

const mapData = {
  zoom: 12,
  position: [55.582559800905926, 13.00460428558812],
  markerCategories: [
    {
      type: 'arena',
      color: '#755728',
      markers: [
        {
          name: 'Swedbank Arena',
          position: [55.58372409722235, 12.987802928589106]
        }
      ]
    },
    {
      type: 'club',
      color: '#14366c',
      markers: [
        {
          name: 'Jockes rackabajsarlag',
          position: [55.57136374188293, 12.993493330258282]
        }
      ]
    },
    {
      type: 'lodging',
      color: '#25841e',
      markers: [
        {
          name: 'Trevligt boende',
          position: [55.564897074686044, 12.973576492024604]
        }
      ]
    },
    {
      type: 'atm',
      color: '#7f8211',
      markers: [
        {
          name: 'Minuten vid Stadion',
          position: [55.584444422651, 12.989066100435894]
        }
      ]
    },
    {
      type: 'restaurant',
      color: '#b51818',
      markers: [
        {
          name: 'O\'Leareys',
          position: [55.580453319248676, 12.958853177352454]
        },
        {
          name: 'McDonalds',
          position: [55.594068887959075, 12.9500562658861]
        },
        {
          name: 'Orvars Korvar',
          position: [55.59442766868656, 12.950861573607154]
        }
      ]
    },
    {
      type: 'parking',
      color: 'black',
      markers: [
        {
          name: 'Parkering stadion',
          position: [55.581107954130964, 12.989043415954846]
        }
      ]
    },
    {
      type: 'airplane',
      color: '#3f7d7a',
      markers: [
        {
          name: 'Arlanda',
          position: [55.590521772112474, 12.988904530774507]
        }
      ]
    },
    {
      type: 'bus',
      color: '#3f7d7a',
      markers: [
        {
          name: 'Södervärn',
          position: [55.58882552719527, 13.006218825143767]
        }
      ]
    },
    {
      type: 'boat',
      color: '#3f7d7a',
      markers: [
        {
          name: 'Malmö Hamn',
          position: [55.61658609761757, 12.997289117070949]
        }
      ]
    },
    {
      type: 'train',
      color: '#3f7d7a',
      markers: [
        {
          name: 'Malmö Centralstation',
          position: [55.60946379977733, 13.00001154238099]
        }
      ]
    },
    {
      type: 'party',
      color: '#993097',
      markers: [
        {
          name: 'Disco',
          position: [55.585603832951875, 13.04571167681943]
        }
      ]
    },
    {
      type: 'themePark',
      color: '#993097',
      markers: [
        {
          name: 'Arnes Tivoli',
          position: [55.57454396334526, 12.910502768373405]
        }
      ]
    },
    {
      type: 'swim',
      color: '#993097',
      markers: [
        {
          name: 'Kalkbrott',
          position: [55.56765833496694, 12.931152245583036]
        }
      ]
    },
    {
      type: 'misc',
      color: '#595959',
      markers: [
        {
          name: 'Kul plats!',
          position: [55.597915073658775, 12.92999260814335]
        }
      ]
    }
  ]
}