React-google-maps-MarkerWithLabel-标签重叠

Question

我正在尝试使用react-google-maps构建一个React项目  图书馆。

基本上，它会计算2个点之间的最佳路线，并使用上方的库在地图上显示该路线。

对于绘图，我使用的是Polyline和MarkerWithLabel模块：

• 绘制线段的折线
• 放置细分开始的标记

我遇到的问题是标签在MarkerWithLabel中的位置，如果将缩放级别设置为适合标签重叠的整个路线。这是因为标记非常接近并且缩放级别很小，这是正常的...

我还附加了2张图片

第一个缩放级别适合所有路线（标记标签重叠的位置）

第二个具有缩放比例的片段（在本例中为蒂米什瓦拉市）实际看到的所有标记

MarkerWithLabel的代码如下

const Markers = () => segments.map((segment) => {
  const { marker } = segment;
  const style = styles.vehicles[marker.vehicle.kind];

  return (
    <MarkerWithLabel
      key={marker.key}
      position={{ lat: marker.lat, lng: marker.lng }}
      labelAnchor={new goo.Point(-10, 15)}
      noRedraw
      icon={{
        path: goo.SymbolPath.CIRCLE,
        scale: 4,
        strokeWeight: 2,
        fillOpacity: 1,
        fillColor: '#ff3f10',
        strokeColor: '#ffffff',
      }}
      labelClass="marker-label"
      labelStyle={{
        width: '400px',
        backgroundColor: 'none',
        color: style.color,
      }}
    >
      <div style={{ clearFix: 'both' }}>
        <span className="marker-text">
          {marker.label}
        </span>
        <div className="circle">
          {style.icon}
        </div>
      </div>
    </MarkerWithLabel>
  );
});

我想知道是否有解决重叠问题的简单方法，只是将它们以某种方式彼此相邻放置或放置在不同的位置。

一种解决方案是手动设置labelAnchor，但我不知道如何找到解决方案，以检测哪些重叠和哪些不重叠