Question

当用户按下标记时，我调用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>

Answer 1

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

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

我的标记如下：

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

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

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

1 个答案: