React Native Maps 如何获取可见标记？

Question

React Native Maps 如何获取可见标记？

7

在iOS使用地图工具包时，我们能够获取当前可见地图矩形内的注释。以下是一个使用Swift的小片段：

Array(myMap.annotations(in: myMap.visibleMapRect))

这个库中是否有可比较的方法或回调函数？

我的基本用法是了解用户何时更改了区域（如双指缩放），并获取当前仍可见的标记数组。

- mKane

你还没有尝试过吗？不妨看一下 getMarkersFrames 方法。这里有详细说明 - https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md - Jono

你有getMarkersFrames代码片段或者如何计算getMapBoundaries到我在markers中拥有的坐标的示例吗？后者看起来可能会非常慢。如果我有6000个标记，每次设置区域时都要逐个迭代它们，这可能会很耗时间。也许我错了。 - mKane

是的，在那种情况下你可能是对的。不是理想的解决方案。 - Jono

谢谢。我很感激。 - mKane

没问题。我今天会检查一遍。谢谢！ - mKane

显示剩余6条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ischenkodv · Accepted Answer

有一个名为getMarkersFrames函数可以做到这一点，但它仅适用于iOS，这就是为什么我从未在我的应用程序中使用过。

我通过使用RBush库来存储标记来解决了同样的问题：https://github.com/mourner/rbush。它允许轻松选择所选区域内的点，并通过使用R树快速完成。例如：

getInitialState() {
    return {
        region: {
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
        },
    };
}

componentWillMount() {
    this.tree = new RBush();
    fetch().then((points) => {
        // RBush expects the point to have minX, maxX, minY, maxY
        // but it could be configured.
        this.tree.load(points);
    });
}

onRegionChangeComplete(region) {
    // Get points that are inside the region.
    visibleItems = this.tree.search({
        // Provide the coordinates of the south-west, north-east corners of the region.
        minX: region.longitude - region.longitudeDelta,
        minY: region.latitude - region.latitudeDelta,
        maxX: region.longitude + region.longitudeDelta,
        maxY: region.latitude + region.latitudeDelta
    });
    this.setState({ region, visibleItems });
}

render() {
    return (
        <MapView
            region={this.state.region}
            onRegionChangeComplete={this.onRegionChangeComplete}
        />
    );
}

我的应用程序使用相同的方法，只是我在redux和redux-saga中进行了初始标记加载和搜索。

如果您不需要显示那么多标记，则可以使用更简单的方法将点存储在数组中。然后，在每个区域更改时，循环遍历所有位置并选择位于该区域内的位置。