Отображение некоторых маркеров, вызывающих исчезновение других - PullRequest
Новая
       13

Отображение некоторых маркеров, вызывающих исчезновение других

0 голосов
/ 12 января 2019

Я пытаюсь написать приложение, показывающее текущее местоположение остановок и трамваев в моем городе. Каждые 5 секунд я выбираю данные из API в методе componentDidMount () и передаю их в качестве реквизита в компонент карты. 1-й раз, когда я показываю карту, каждый маркер находится на своем месте. Однако через 5 секунд маркеры моих остановок исчезают и появляются только маркеры трамваев.

Я уже пытался получить в другом месте, вместо того, чтобы получать данные трамвая, издеваться. Кроме того, не имеет значения, использую ли я Google Карты или буклет для реагирования - результат тот же.

App.js: 

class App extends Component {

constructor() {
    super();
    this.state = {};
    this.getStops = this.getStops.bind(this);
    this.getTrams = this.getTrams.bind(this);
}

componentDidMount() {
    this.getStops();
    this.getTrams();
    setInterval(() => this.getTrams(), 5000);
}

getStops() {
    fetch('http://localhost:8080/stopInfo/stops')
    .then(response => response.json())
    .then(stops => this.setState({ stops: stops.stops }));
}

getTrams() {
    fetch('http://localhost:8080/vehicleInfo/vehicles')
    .then(response => response.json())
    .then(trams => this.setState({ trams: trams.vehicles }));
}

render() {

    function normalizeMarker(obj) {

      if (obj.latitude !== undefined && obj.longitude !== undefined) {
        obj.latitude /= (1000 * 3600);
        obj.longitude /= (1000 * 3600);
      }

      return obj;

    }

    if (this.state.stops === undefined) {
      return ('loading stops...');
    }

    if (this.state.trams === undefined) {
      return ('loading trams...');
    }

    let trams = this.state.trams.map((tram) => normalizeMarker(tram));
    let stops = this.state.stops.map((stop) => normalizeMarker(stop));

    return (
      <div className="App">
        <MapContainer stops={stops} trams={trams}/>
      </div>
    );
}

MapContainer.js: 

export default class MapContainer extends Component {

constructor(props) {
    super(props);
    this.state = {
        lat: 50.0613888889,
        lng: 19.9383333333,
        zoom: 13
    };
}

displayStop(stop) {
    return (
        <Marker key={stop.id} position={[stop.latitude, stop.longitude]} icon={stopIcon}>
            <Popup>
                Stop: {stop.name}
            </Popup>
        </Marker>
    );
}

displayTram(tram) {

    if (tram.deleted === true) {
        return;
    }

    return (
        <Marker key={tram.id} position={[tram.latitude, tram.longitude]} icon={tramIcon}>
            <Popup>
                Tram: {tram.name}
            </Popup>
        </Marker>
    );
}

render() {

    const position = [this.state.lat, this.state.lng];

    return (
        <Map center={position} zoom={this.state.zoom}>
            <TileLayer
                attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            {this.props.stops.map((stop) => this.displayStop(stop))}
            {this.props.trams.map((tram) => this.displayTram(tram))}
        </Map>
    );
}

}

Я потратил много времени на поиски решения. Было бы здорово, если бы кто-то мог мне помочь.

1 Ответ

0 голосов
/ 12 января 2019

Я понял это - я вызывал функцию normalizeMarker () каждый раз, когда я рендерил. Для трамваев это будет работать, потому что они обновляются каждые 5 секунд, но остановки сохраняются в состоянии один раз, поэтому для них это называлось несколько раз, портя координаты.

В любом случае, спасибо за ваши ответы! Я посмотрю на них, чтобы я мог улучшить свой код:)

...