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

Question

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

我的地图屏幕负载流程：

1. 加载地图
2. 获取用户位置（存储在位置 useState 中）
3. HTTP 获取标记位置请求（每个标记获得纬度和经纬度）
4. 获取用户周围的标记（如果同意共享位置）
5. 显示屏幕

    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

最后，这是我的解决方案，我使用 libary 按距离对标记进行排序 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)
  }