Динамическое обновление маркеров - PullRequest
Новая
       5

Динамическое обновление маркеров

0 голосов
/ 19 июня 2020

У меня есть собственная карта реакции, которая перемещается в местоположение в зависимости от устройства, на которое нажимает пользователь. Это прекрасно работает, когда пользователь нажимает на элемент плоского списка, он анимирует пользователя по этим координатам.

Я борюсь с динамическим добавлением маркера, когда пользователь нажимает на элемент списка. Вот код рендеринга, который 

<View style={stylesB.container} >
       <MapView
       ref={map => this._map = map}
        style={stylesB.map}
        initialRegion={this.state.region}
        >
      <Marker 
        coordinate={{ latitude: 52.93877, longitude:-1.201258 }} 
        image={require("./derbymarker.png")}
      />
      </MapView>
    <View style={stylesB.containerlower}>
      <View>
      {isLoading ? <ActivityIndicator/> : (
        <FlatList
          data={data}
          horizontal={true}
          showsHorizontalScrollIndicator={false}
          keyExtractor={({ id }, index) => id}
          renderItem={({ item }) => (
          <TouchableOpacity onPress={() => this.onCarouselItemChange(item.Lat, item.Long)}>
            <View style={styles.containerfixturedetails}>
              <View style={styles.factscontainer}>
                <View style={styles.factscontainerupper}>
                  <Text style={styles.kickofftime}>KO{"\n"}{item.KOTime}</Text>
                  <Text style={styles.playerprofilename}>vs {item.Opposition}{"\n"}{Moment(item.Date, "DDMMYYYY").format('ddd Do MMM YYYY')}</Text>
                </View>
                <View style={styles.fixturecontainerlower}>
                  <Text style={styles.fixturestats}>TEAM: {item.Team}</Text>
                  <Text style={styles.fixturestats}>ADDRESS: {item.LocationAddress}</Text>
                  <Text style={styles.fixturestats}>ADMISSION: {item.Admission}</Text>
                </View>
              </View>
              <View style={styles.playerprofileimgcontainer}>

              </View>
            </View>
          </TouchableOpacity>
          )}
        />
      )}
      </View>
    </View>
  </View>

Когда пользователь нажимает на элемент списка, onCarouselItemChange передает координаты для обновления карты; 

 onCarouselItemChange = (lat,long) => {
   let location = this.state.region;
   this._map.animateToRegion({
    latitude: lat,
    longitude: long,
    latitudeDelta: 0.015,
    longitudeDelta: 0.0121,
   })
 }

Как внутри метода onCarouselItemChange я могу также обновить / добавить маркер? Я рассматривал различные способы, но они основаны на массиве, определенном в начале, а не на подлинном маркере Dynami c, основанном на щелчке по событию. Я не могу найти на карте никаких свойств, которые можно было бы использовать для этого.

...