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完成

1 个答案: