如何在 React Native MapView 中获取用户位置周围的标记？

Question

我想获取最接近用户位置（按顺序）的前 5 个标记并将其放入 useState 对象中。我怎样才能做到这一点？

我的地图屏幕负载流：

加载地图
获取用户位置（存储在location useState）
HTTP 获取标记位置请求（每个标记都有 lat 和 ltd）
获取用户周围的标记（如果同意共享位置）
显示画面

    const fetchClosestRendelok = async () => {

      //Get markers in an area here and add to a json 
    }

    const fetchRendeloData = async () => {
        const data = await fetchRendelok()
        setRendelok(data)
    }

    useEffect(() => {
      fetchRendeloData()
      fetchClosestRendelok()
    }, []);



return (
    <View style={styles.container}>
        <MapView style={styles.map}
        provider={PROVIDER_GOOGLE}
        region={mapRegion}
        showsUserLocation={true}
        onPress={() => setSelectedMarkerIndex("")}
        >
            {
            rendelok.map((rendelok) => {
              return (
              <Marker
              key={rendelok.id}
              coordinate={{ latitude:parseFloat(rendelok.lat), longitude:parseFloat(rendelok.ltd) }}
              onPress={() => markerClick(rendelok)}
              tracksViewChanges={false}
              >
                <View>
                  <MaterialCommunityIcons name="hospital-marker" size={selectedMarkerIndex === rendelok.id ? 80 : 30} color={selectedMarkerIndex === rendelok.id ? 'red' : color_theme_light.iconColor}/>
                </View>
              </Marker >
              )
              })
            }
        </MapView>   

    </View>
);
}

Answer 1

最后这是我的解决方案，IS 使用库按距离 https://github.com/manuelbieh/geolib 对我的标记进行排序，然后我将坐标与原始数组进行比较。

  try {
    let coordsArray = []
    rendelok.map((rendelok) => coordsArray.push({latitude:rendelok.lat, longitude:rendelok.ltd}))
    let closestRendelok = orderByDistance(userPosition.coords, coordsArray).slice(0,5);
    var result = rendelok.filter(function (o1) {
      return closestRendelok.some(function (o2) {
          return o1.lat === o2.latitude;
     });
    });
    setClosestRendelok(result)
  } catch (error) {
    console.log(error)
  }

如何在 React Native MapView 中获取用户位置周围的标记？

How do I fetch Markers around the users location in React Native MapView?

javascript

geolocation

marker

android-mapview

react-native