Javascript 反应本机地图标注渲染

我正在使用

react native maps

显示我所在地区火车站的标记。每个标记都有一个带有接近列车实时数据的标注

问题是,；对于地图上的每个标记，每个标注都在背景中呈现。此外，由于我有来自实时API的新数据，每个调用都将被重新呈现。这导致数百个视图被渲染，即使我只需要按下的标记的标注

是否有方法确保在用户按下特定标记之前不会呈现详图索引？新闻发布后；我还希望确保仅渲染和显示特定标记的标注

我的代码：

地图屏幕：

const MapScreen = props => {
  // get user location from Redux store
  // this is used to center the map
  const { latitude, longitude } = useSelector(state => state.location.coords)

  // The MapView and Markers are static
  // We only need to update Marker callouts after fetching data
  return(
    <SafeAreaView style={{flex: 1}}>
    <MapView
        style={{flex: 1}}
        initialRegion={{
          latitude:  parseFloat(latitude) || 37.792874,
          longitude: parseFloat(longitude) || -122.39703,
          latitudeDelta: 0.06,
          longitudeDelta: 0.06
        }}
        provider={"google"}
      >
        <Markers />
      </MapView>
      </SafeAreaView>
  )
}

export default MapScreen

const-MapScreen=props=>{
//从Redux存储获取用户位置
//这用于使地图居中
常量{纬度，经度}=useSelector（state=>state.location.coords）
//地图视图和标记是静态的
//我们只需要在获取数据后更新标记标注
返回(
)
}
导出默认映射屏幕

标记组件：

const Markers = props => {
  const stationData = useSelector(state => state.stationData)

  return stationData.map((station, index) => {
    return (
      <MapView.Marker
        key={index}
        coordinate={{
          // receives station latitude and longitude from stationDetails.js
          latitude: parseFloat(stationDetails[station.abbr].gtfs_latitude),
          longitude: parseFloat(stationDetails[station.abbr].gtfs_longitude)
        }}
        image={stationLogo}
        zIndex={100}
        tracksInfoWindowChanges={true}
      >
        <MapView.Callout
          key={index}
          tooltip={true}
          style={{ backgroundColor: "#ffffff" }}
        >
          <View style={styles.calloutHeader}>
            <Text style={{ fontWeight: "bold" }}>{station.name}</Text>
          </View>
          <View style={styles.calloutContent}>
            <StationCallout key={index} station={stationData[index]} />
          </View>
        </MapView.Callout>
      </MapView.Marker>
    );
  });
};

const StationCallout = (props) => {
  return(
    props.station.etd.map((route, index) => {
      const approachingTrains = function() {
        trainText = `${route.destination} in`;

        route.estimate.map((train, index) => {
          if (index === 0) {
            if (train.minutes === "Leaving") {
              trainText += ` 0`;
            } else {
              trainText += ` ${train.minutes}`;
            }
          } else {
            if (train.minutes === "Leaving") {
              trainText += `, 0`;
            } else {
              trainText += `, ${train.minutes}`;
            }
          }
        });

        trainText += " mins";

        return <Text>{trainText}</Text>;
      };

      return <View key={index}>
      {approachingTrains()}
      </View>;
    })
  )
};

export default StationCallout

const Markers=props=>{
常量stationData=useSelector（state=>state.stationData）
返回站点Data.map（（站点，索引）=>{
返回(
{station.name}
);
});
};

StationCallout组件：

const Markers = props => {
  const stationData = useSelector(state => state.stationData)

  return stationData.map((station, index) => {
    return (
      <MapView.Marker
        key={index}
        coordinate={{
          // receives station latitude and longitude from stationDetails.js
          latitude: parseFloat(stationDetails[station.abbr].gtfs_latitude),
          longitude: parseFloat(stationDetails[station.abbr].gtfs_longitude)
        }}
        image={stationLogo}
        zIndex={100}
        tracksInfoWindowChanges={true}
      >
        <MapView.Callout
          key={index}
          tooltip={true}
          style={{ backgroundColor: "#ffffff" }}
        >
          <View style={styles.calloutHeader}>
            <Text style={{ fontWeight: "bold" }}>{station.name}</Text>
          </View>
          <View style={styles.calloutContent}>
            <StationCallout key={index} station={stationData[index]} />
          </View>
        </MapView.Callout>
      </MapView.Marker>
    );
  });
};

const StationCallout = (props) => {
  return(
    props.station.etd.map((route, index) => {
      const approachingTrains = function() {
        trainText = `${route.destination} in`;

        route.estimate.map((train, index) => {
          if (index === 0) {
            if (train.minutes === "Leaving") {
              trainText += ` 0`;
            } else {
              trainText += ` ${train.minutes}`;
            }
          } else {
            if (train.minutes === "Leaving") {
              trainText += `, 0`;
            } else {
              trainText += `, ${train.minutes}`;
            }
          }
        });

        trainText += " mins";

        return <Text>{trainText}</Text>;
      };

      return <View key={index}>
      {approachingTrains()}
      </View>;
    })
  )
};

export default StationCallout

const StationCallout=（道具）=>{
返回(
道具.车站.etd.地图（（路线，索引）=>{
const approachingTrains=函数（）{
trainText=`${route.destination}在`；
路线.估算.地图（（列车，索引）=>{
如果（索引==0）{
如果（列车时间==“离开”）{
trainText+=`0`；
}否则{
trainText+=`${train.minutes}`；
}
}否则{
如果（列车时间==“离开”）{
列车文字+=`，0`；
}否则{
trainText+=`，${train.minutes}`；
}
}
});
列车文字+=“分钟”；
返回{trainText}；
};
返回
{approachingTrains（）}
;
})
)
};
导出默认StationCallout

在ComponentDidMount上，您应该获取所有序列的数据，以便可以在其位置上设置所有标记。您可以使用firebase的once（'value'）事件执行此操作。调用引用时，此事件仅从引用中获取一次数据，因此您将在组件挂载时调用它

现在，当所有指针都在它们的位置上时，用户可以单击任意一个指针来跟踪它的移动，对吗

所以每个指针必须有唯一的东西，比如火车ID或者我不知道你的数据库结构的东西，所以我假设你有火车ID， 现在在marker的onPress功能中，您应该传递这个TrainID

例如：

onPress={()=> this.TrackSpecificTrain(trainID)  }

现在，在

TrackSpecificTrain

功能中，您应该使用列车ID和firebase事件调用数据库引用，现在您将继续获取所选列车的实时数据，并且您可以使用来自firebase的新数据更新您的本地州

stationData

范例

TrackSpecificTrain=(trainID)=>{
const ref = database().ref(`YourTrainsRef/${trainID}/`)
  ref.on('value',( snapshot)=>{
           //Update your local state with new data in snapshot
        })
}


RemoveTracker=(trainID)=>{
const ref = database().ref(`YourTrainsRef/${trainID}/`)

ref.off("value")

}

现在，我们也在使用

RemoveTracker

，因为如果用户单击另一个标记，您可能需要停止跟踪上一列车，这样它将开始跟踪新标记上的列车ID，并停止跟踪上一列车