Как исправить перекрывающиеся маркеры карты? - PullRequest
Новая
       13

Как исправить перекрывающиеся маркеры карты?

0 голосов
/ 20 февраля 2019

этот код работает просто отлично: 

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'
}
...