如何修复重叠的地图标记？

Question

此代码可以正常工作：

render() {
    const {classes, driversStore} = this.props;
    return (
        <div className={classes.container}>
            <GoogleMapReact
                bootstrapURLKeys={{key: 'ANY_KEY'}}
                defaultCenter={this.props.initialLocation}
                defaultZoom={this.props.zoom}
            >
                {
                    driversStore.selectedDrivers.map(driver => {
                        return driver.orderSequence.map(order => {
                            return <Marker
                                lat={order.lat}
                                lng={order.lng}
                                index={order.index}
                                color={driver.colorCode}/>
                        })
                    })
                }
            </GoogleMapReact>
        </div>
    );
}

}

但是，当我尝试制作其他组件进行整理时，结果在地图上显示出重叠的标记。不能正常工作。当我实现此新组件 RenderMarker.js

时，就会发生这种情况

@inject('driversStore')
@observer
class RenderMarkers extends Component {
render(){
    const {driversStore} = this.props;
    return (
    <div>

        {driversStore.selectedDrivers.map(driver => {
        return driver.orderSequence.map(order => {
           return <Marker
                 lat={order.lat}
                 lng={order.lng}
                 index={order.index}
                 color={driver.colorCode}/>
                           })
                       })
                   }

           </div>
           )
}

}

并在上面编写的第一个代码中将此组件作为 RenderMarkers 导入：

 render() {
    const {classes} = this.props;
    return (
        <div className={classes.container}>
            <GoogleMapReact
                bootstrapURLKeys={{key: 'ANY_KEY'}}
                defaultCenter={this.props.initialLocation}
                defaultZoom={this.props.zoom}>
            <RenderMarkers/>
            </GoogleMapReact>


        </div>
    );
}

}

给我重叠的标记。有什么线索吗？ CSS可能是这里的问题吗？

MarkerStyle：

const WIDTH = '15px';
const HEIGHT = '15px';

const markerStyle = () => ({


general: {
    position: 'absolute',
    width: WIDTH,
    height: HEIGHT,
    top: -WIDTH / 2,
    left: -HEIGHT / 2,
    textAlign: 'center'
},


circle: {
    borderRadius: '50%',
    borderStyle: 'solid',
    borderWidth: '1px',
    fontWeight: 'bold',
    color: '#FFF'
}