如何检查标记是否在反应本机地图中屏幕上显示的区域中

Question

我在底部的 FlatList 中水平显示了项目列表，并在地图中显示了所有标记。现在用户可以自由缩放 in/out 地图或单击任何标记，底部的 FlatList 将滚动到项目。用户还可以滚动 FlatList 并根据索引标记进行选择。当列表很大且用户手动放大地图时。

现在的问题是用户可以缩放地图上的任何位置，当用户滑动下面的列表并更改项目索引时，我需要能够检查该标记是否在屏幕上，如果不在屏幕上则缩放到该标记.

所以我可以使用以下代码手动缩放区域。

  const animateMapToRegion = (region = null, duration = 1000) => {
    if (region) {
      mapRef.current.animateToRegion(region, duration);
    }
  };

仅当屏幕上没有标记时才需要制作此动画。我检查了文档，但找不到任何功能来检查标记是否在屏幕上。

我只想在标记在屏幕上不可见时设置动画。请协助。

Answer 1

我最后为 iOS 和 Android 添加了我自己的实现。

在AIRGoogleMapManager.m

中添加以下方法

RCT_EXPORT_METHOD(isMarkerWithinScreen:(nonnull NSNumber *)reactTag
                  position:(CLLocationCoordinate2D)position
                  resolver: (RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)
{
  [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
    id view = viewRegistry[reactTag];
    if (![view isKindOfClass:[AIRGoogleMap class]]) {
      RCTLogError(@"Invalid view returned from registry, expecting AIRMap, got: %@", view);
    } else {
      AIRGoogleMap *mapView = (AIRGoogleMap *)view;

      GMSVisibleRegion region = [mapView.projection visibleRegion];
      GMSCoordinateBounds *bounds = [[GMSCoordinateBounds alloc] initWithRegion:region];
        
      resolve(@{@"visible": @([bounds containsCoordinate:position])});
    }
  }];
}

在AirMapModule.java

中添加以下方法

 @ReactMethod
  public void isMarkerWithinScreen(final int tag, ReadableMap coordinate, final Promise promise) {
    final ReactApplicationContext context = getReactApplicationContext();

    final double lat = coordinate.getDouble("latitude");
    final double lng = coordinate.getDouble("longitude");
    final LatLng position = new LatLng(lat,lng);

    UIManagerModule uiManager = context.getNativeModule(UIManagerModule.class);
    uiManager.addUIBlock(new UIBlock()
    {
      @Override
      public void execute(NativeViewHierarchyManager nvhm)
      {
        AirMapView view = (AirMapView) nvhm.resolveView(tag);
        if (view == null)
        {
          promise.reject("AirMapView not found");
          return;
        }
        if (view.map == null)
        {
          promise.reject("AirMapView.map is not valid");
          return;
        }

        LatLngBounds currentScreen = view.map.getProjection().getVisibleRegion().latLngBounds;
        boolean onScreen = currentScreen.contains(position);

        WritableMap visibleJson = new WritableNativeMap();
        visibleJson.putBoolean("visible", onScreen);

        promise.resolve(visibleJson);
      }
    });
  }

add 最后在node_modules/react-native-maps/lib/components/MapView.js

下面添加

isMarkerWithinScreen(marker) {
    if (Platform.OS === 'android') {
      return NativeModules.AirMapModule.isMarkerWithinScreen(
        this._getHandle(),
        marker.coordinate
      );
    } else if (Platform.OS === 'ios') {
      return this._runCommand('isMarkerWithinScreen', [marker.coordinate]);
    }
    return Promise.reject('isMarkerWithinScreen not supported on this platform');
  }

现在您可以将其用作，

  const marker = //your marker;
  const visibility = await mapRef.current.isMarkerWithinScreen(marker);
  const {visible} = visibility;
  console.log('visible-->', visible); //If visible is true marker is on screen otherwise its not.

如何检查标记是否在反应本机地图中屏幕上显示的区域中

how to check if Marker is in the region displayed on the screen in react native maps

javascript

marker

react-native

react-native-maps