如何计算react-native-maps中的圆圈大小（以像素为单位）

Question

我正在使用react-native-maps 在地图上创建圆圈。当用户长按然后向上或向下拖动时，我会动态调整圆圈的半径。然而，这种方法导致了滞后问题。为了缓解这个问题，我在地图上实现了一个动画视图圈。

现在，我面临的问题是我似乎无法调整动画视图圆圈的大小以匹配地图上的圆圈。最初，我将地图圆半径设置为 20 米。然而，当我缩小时，地图圆圈保持在 20 米，而我的动画视图圆圈显得更大。

我正在寻找一种方法来计算地图圆半径（以像素为单位），以便我可以将两个圆调整为相同的大小。任何有关如何实现这一目标的见解将不胜感激。

谢谢！

Answer 1

为了转换以米为单位的像素，您需要知道地图当前显示的部分代表了多少米。

为此，您需要知道地图有多少像素。

然后，通过使用回调

onRegionChangeComplete

或任何您喜欢了解所表示区域的方法，您需要将像素转换为米。

const onRegionChange = useCallback(
   (region: Region) => {
     const {latitudeDelta, latitude, longitude} = region;
     const horizontalMeters = measure(
       latitude - latitudeDelta / 2,
       longitude,
       latitude + latitudeDelta / 2,
       longitude,
     );
     const meterPerPixel = horizontalMeters / width;
     setCircleWidth(12 * meterPerPixel); // 12 is my desired dimension in pixels
   },
   [onRegionChangeCallback, width],
 );

measure

是我从另一个答案中提取的方法。