隐藏标记标注直到 animateToRegion 完成

Question

在 animateToRegion 完成之前，我将如何隐藏标注不出现？

            <Marker
                ref={(ref) => {this.markerRef = ref; }}
                coordinate={mapMarker.location.latlng}
                title={mapMarker.location.streetName}
                stopPropagation={true}
                pointerEvents='auto'
                onPress={() => console.log('pressed')}
                onSelect={() => {
                    this.props.handlePress();
                }}
            >

传递的 handlePress 方法只是一个 animateToRegion 并且正在正常工作并移动到正确的位置。但是我需要将标注延迟到区域移动之后出现，因为标注现在由于区域更改而不再居中。

我试过使用 showCallout 设置超时，但没有奏效，因为它会导致标注闪烁。有什么建议吗？

Answer 1

我没有尝试延迟标注的显示，而是决定适当地为地图设置动画以确保标注始终适合屏幕。基本上每当按下标记时，我都会获取标记的经纬度并移动地图，以便标记位于地图的下部 25% 并居中（取决于 iOS 或 Android因为它们呈现的标注略有不同）。这使我能够确保标注永远不会位于屏幕顶部的组件后面。

我将 <Marker ..> 代码移到了我现在正在使用的单独的自定义组件中。

<MapMarker 
    key={index}
    mapMarker={marker}
    handlePress={() => this.moveMapToCoordinate(marker.location)}
/>

这是我的 moveMapToCoordinate 函数：

moveMapToCoordinate(markerLocationInfo) {
        this.map.animateToRegion({
            ...this.state.region,
            latitude: this.state.region.latitude + ((markerLocationInfo.latlng.latitude) - (this.state.region.latitude - (this.state.region.latitudeDelta/4))),
            longitude: Platform.OS === 'ios' ? this.state.region.longitude : this.state.region.longitude + ((markerLocationInfo.latlng.longitude) - (this.state.region.longitude))
        }, 500)
}

隐藏标记标注直到 animateToRegion 完成

Hiding marker callout until completion of animateToRegion

react-native

react-native-maps