Динамическое обновление маркеров карты при смене слайдера - React Native - PullRequest
Новая
       9

Динамическое обновление маркеров карты при смене слайдера - React Native

1 голос
/ 12 июня 2019

У меня небольшая проблема с маркерами рендеринга. Все становится медленным и медленным. Вы можете увидеть это на этом видео: 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 ()

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

Я надеюсь, что есть лучшее решение с повторным рендерингом маркеров.

...