显示一些标记导致其他标记消失

Question

我正在尝试编写一个应用程序来显示我所在城市的车站和电车的当前位置。每隔 5 秒，我在 componentDidMount() 方法中从 API 获取数据，并将其作为 props 传递给我的地图组件。我第一次显示地图时，每个标记都在其位置。然而，5 秒后，我的停靠站标记消失了，只有电车标记就位。

我已经尝试在不同的地方获取，模拟而不是获取电车数据。我使用 Google 地图或 react-leaflet 也没关系 - 结果是一样的。

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

}

我花了很多时间寻找解决方案。如果有人能帮助我，那就太好了。

Answer 1

我已经弄明白了 - 我每次渲染时都在调用 normalizeMarker() 函数。对于有轨电车，这会起作用，因为它们每 5 秒更新一次，但停靠点只保存一次状态，因此对它们来说，它被称为多次扰乱坐标。

无论如何，感谢您的回答！我会研究它们，以便改进我的代码:)

显示一些标记导致其他标记消失

Displaying some markers causing disappearing of the others

javascript

google-maps

reactjs

react-leaflet