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

Question

我正在尝试使用react-google-maps 库构建一个反应项目。

基本上它计算两点之间的最佳路线，并使用上面的库在地图上显示路线。

对于绘图，我使用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但我不知道如何为此找到解决方案，以检测哪些重叠哪些不重叠