React-google-maps - MarkerWithLabel - Labels overlap

问题

I'm trying to build a react project with the react-google-maps library.

Basically it calculates the best route between 2 points and displays the route on the map using the library above.

For drawing I'm using the Polyline and MarkerWithLabel modules:

The Polyline to draw the segments
The Markers to place the start of a segment

The issue that I am having is the position of the labels form the MarkerWithLabel, if the zoom level is set to fit the whole route the labels overlap. This is because markers are very close and the zoom level is small, which is normal...

I've also attached 2 images

The first one with the zoom level to fit all the route (in which the markers label overlap)

The second one with the zoom level over one segment(in our case the city of Timisoara) to actual see the all the markers

The code for the MarkerWithLabel is below

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>
  );
});

I want to know if there is a simple way of resolving the overlapping problem, just to place them somehow one next to the other or in different positions.

One solution would be to manually set the labelAnchor but I don't know how to find a solution for this, to detect which are overlapping and which not

来源：https://stackoverflow.com/questions/51785991/react-google-maps-markerwithlabel-labels-overlap

标签

react-google-maps