隐藏标记标注,直到animateToRegion完成

问题描述 投票:0回答:1

我将如何隐藏标注,直到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设置超时,但是由于它会导致标注闪烁,因此无法正常工作。有什么建议吗?

react-native react-native-maps
1个回答
0
投票

不是决定延迟标注的出现,我决定对地图进行适当的动画处理,以确保标注始终适合屏幕。基本上,每当按下一个标记时,我都会取标记的纬度,纬度并移动地图,以使该标记位于地图的下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)
}
© www.soinside.com 2019 - 2024. All rights reserved.