9

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

2 回答 2

2

我也有这个精确的问题。我目前的解决方案是让我的标记的 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()但这没有明显的效果。

于 2018-07-13T16:05:53.210 回答
0

我找到了一种转变方式来解决这个问题......

使用状态变量，您可以隐藏/显示空白标注和要显示的标注

{this.state.showCallout == true ? <Callout tooltip={true}>
    <View style={{backgroundColor: 'white', width: 'auto', minWidth: 50, paddingVertical: 2}}>
        {emp.type == "group" ?
        <View>
            {emp.employees.map(e => {
                return (
                    <Text style={{marginVertical: 2}}>{e.display_name}</Text>
                )
            })}
        </View>
        : 
        <Text>
        
        </Text>}
    </View>
</Callout> : <Callout tooltip={true}>
    <View style={{backgroundColor: 'transparent'}}></View>
</Callout>}

然后在onPress中，可以setTimeout

this.mapRef.animateCamera({
    center: {
        latitude: emp.latitude,
        longitude: emp.longitude,
    },
    heading: 0, pitch: 0, 
    zoom: 32,
    altitude: 1000,
}, {duration: 1000});
setTimeout(() => {
    this.setState({ showCallout: true })
    this.markerRefs[i].showCallout();
},1000)

然后在 onCalloutPress 你可以做

this.markersRefs[i].hideCallout();
this.setState({ showCallout: false )};
于 2021-12-01T23:04:56.180 回答