反应原生地图:显示Callout之前的中心标记onPress

Question

反应原生地图:显示Callout之前的中心标记onPress

joh*_*ohn 7 javascript react-native react-native-maps

当用户按下标记时,我调用animateToCoordinate将标记置于屏幕中间.问题是,在animateToCoordinate完成动画之前,标注会被渲染到区域的位置,因此标注会在屏幕外显示.无论如何都要延迟标注显示,直到animateToRegion完成？还是有另一种方式可以完全解决这个问题,我没有看到？

 <MapView
    ref = {(mapView) => { _mapView = mapView; }}
    style={styles.map} 
    region={this.state.mapRegion}
    showsUserLocation = {true}
    showsMyLocationButton   = {true}
    followUserLocation={true}
    onRegionChange={this.onRegionChange.bind(this)}>


 {data.near.map(marker => 
   {if(marker.posts.length != 0){
     return (
      <MapView.Marker
      coordinate={{latitude: marker.location.latitude,
            longitude: marker.location.longitude}}
      title={marker.name}
      description={marker.description}
      onPress={ e => _mapView.animateToCoordinate({
        latitude: e.nativeEvent.coordinate.latitude,
        longitude:  e.nativeEvent.coordinate.longitude
      }, 500)}
      onCalloutPress={ e => this._onPressItem(marker.id)}
    >
    <Icon name="ios-pin" style={{ fontSize: 45, color: '#f04c34'}} />

    <MapView.Callout 
            style={{ flex: -1, position: 'absolute', width: width}}>
    <ListItem >

    <Body >
        <View style={{flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',}}>
    <Text style={{fontSize: 18, color: '#38383a', marginBottom: 10, fontWeight: 'bold'}} 
    >{marker.name}</Text>

    <Text style={{fontSize: 14, color: '#38383a', fontWeight: 'bold'}}>{marker.distance.toFixed(2)} miles</Text>
</View>
    <Text style={{fontSize: 16,  fontFamily: 'Avenir', marginBottom: 15}}
    >{marker.infoText}</Text>

    <Text>
    <Text style={{fontSize: 12, color: '#38383a', fontWeight: 'bold'}}
    >{marker.address}</Text>

    </Text>

        </Body>
        <Right></Right>




</ListItem>
  </MapView.Callout>
    </MapView.Marker>
     )
   }else return null;

   })}
  </MapView>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 2

我也有这个确切的问题。我当前的解决方案是使我的标记的 onPress 看起来像这样：

markerOnPress (coord) {
  TIME_FOR_ANIMATION = 700;
  this.mapview.animateToCoordinate(coord);
  setTimeout(() => {
    this.markerRef.showCallout();
  }, TIME_FOR_ANIMATION);
}

Run Code Online (Sandbox Code Playgroud)

我的标记看起来像这样：

<Marker
  ref={(ref) => { this.markerRef = ref; }}
  coordinate={coord}
  title={someTitle}
  description={someDescription}
  onPress={() => this.onMarkerPress(coord)}
/>

Run Code Online (Sandbox Code Playgroud)

这工作正常，尽管仍然发生一些不需要的行为，我不确定为什么。现在，当我单击标记时，标注会立即出现，然后在动画到坐标之前消失，动画到坐标，然后根据需要显示标注。我不知道为什么它最初仍然立即显示标注。我尝试通过制作第一行markerOnPress来解决这个问题，this.markerRef.hideCallout()但这没有明显的效果。

归档时间：	8 年，4 月前
查看次数：	1361 次
最近记录：	7 年，6 月前