在滑块更改时动态更新地图标记-React Native

Question

我在渲染标记时有一些问题。 一切都变得缓慢而缓慢。 您可以在以下视频中看到它：https://streamable.com/fjqe7

是否可以使标记更平滑？

这就是我尝试过的

<View style={styles.slider}>
          <Slider
            maximumValue={1000}
            minimumValue={100}
            step={50}
            value={this.state.newRadius}
            onValueChange={newRadius => {
            this.setState({newRadius})
            this.getLocation()
           }}
          />
          <View>
            <Text>Radius: {this.state.newRadius} meter</Text>
          </View>
</View>

onValueChange我正在加载getLocation（）

我的getLocation用于显示和过滤RadiusValue中的标记

getLocation(){
       let { region } = this.state;
       let { latitude, longitude } = region;
       let markers = spielanlagen.map(marker =>  {
       let name = marker.name
       let image = marker.image
       let street = marker.street
       console.log(name);
       console.log(marker.coordinate);
       let coords = marker.coordinate
         return {
           coordinate: {
             latitude: coords[0],
             longitude: coords[1],
           },
           name: marker.name,
           street: marker.street,
           image: marker.image
         }
       }).filter(marker => {
           let distance = this.calculateDistance(latitude, longitude, marker.coordinate.latitude, marker.coordinate.longitude);
           return distance <= this.state.newRadius;
         });
      this.setState({
         markers: markers,
         loaded: true,
       });
  };

calculateDistance(origLat, origLon, markerLat, markerLon) {
      return geolib.getDistance(
        {latitude: origLat, longitude: origLon},
        {latitude: markerLat, longitude: markerLon}
      );
  }

我希望通过重新渲染标记有更好的解决方案。