检测标记是否在视点内

Question

我正在使用 react-native-maps。我有一个项目列表，我将其作为标记显示在地图中。如何检测标记是否在用户在地图中搜索的范围内。我尝试使用 react-native-component-inview 包，但它不起作用。这是我的完整 MapView

代码

<MapView
  ref={mapRef}
  provider="google"
  initialRegion={tripdata.pickup ? initialRegion : qatarRegion}
  onRegionChange={onRegionChange}
  onRegionChangeComplete={onRegionChangeComplete}
 >
        {mapAds
          ? mapAds.map((item, index) => {
              return (
                <Marker
                  onPress={() => mapEngagement(item.id)}
                  coordinate={{
                    latitude: item.lat ? item.lat : 0.0,
                    longitude: item.lng ? item.lng : 0.0,
                  }}
                  key={index}
                >
                  <TouchableOpacity
                    style={{
                      width: 50,
                      height: 50,
                      backgroundColor: colors.GREY.YELLOW,
                      borderRadius: 100,
                      justifyContent: "center",
                      alignItems: "center",
                    }}
                  >
                    <Image
                      source={{
                        uri: item.logo
                          ? item.logo
                          : "https://firebasestorage.googleapis.com/v0/b/faroutdrive001.appspot.com/o/corporations%2F-McAZ_l4YQ4X4Hg71dTF%2Flogo?alt=media&token=de3aff61-0deb-4cea-a3f0-0e0b491146b1",
                      }}
                      style={{
                        height: 47,
                        width: 47,
                        zIndex: 2,
                        borderRadius: 100,
                      }}
                    />
                    {/* <Text>{visible}</Text> */}
                  </TouchableOpacity>
                  <Callout tooltip>
                    <View style={{ padding: 3 }}>
                      <TouchableOpacity
                        style={{
                          backgroundColor: colors.GREY.YELLOW,
                          justifyContent: "space-evenly",
                          alignItems: "center",
                          minWidth: 120,
                          maxWidth: 150,
                          minHeight: 50,
                          borderRadius: 10,
                        }}
                      >
                        <Text style={{ color: colors.WHITE }}>
                          {item.ad_name ? item.ad_name : "Advertise Here"}
                        </Text>
                        <Text style={{ color: colors.WHITE, fontSize: 12 }}>
                          {item.ad_description ? item.ad_description : ""}
                        </Text>
                      </TouchableOpacity>
                    </View>
                  </Callout>
                </Marker>
              );
            })
          : null}
</MapView>

Answer 1

您描述的问题 space 称为“多边形中的点”问题。基本上你的地图视图隐含了 latitude/longitude 边界，你需要知道一个点（即你的标记）是否包含在多边形（你的地图视图边界）中。

有几种方法可以解决这个问题。长话短说，除非您想了解和实施涉及测地线和半正弦公式的地理数学和算法，否则我建议您改为利用一个好的包来完成困难的部分。我使用 TurfJS 来做到这一点。我不以任何方式代表他们或他们的社区，但它似乎制作精良，我很喜欢使用 JS 和 Java 实现来解决这样的问题。

对于这个特殊问题，我建议您参考这里：

https://www.npmjs.com/package/@turf/boolean-point-in-polygon

基本上你会想要使用他们提供的示例，我将其复制到这里以供后代使用，以防 link 发生变化：

var pt = turf.point([-77, 44]);
var poly = turf.polygon([[
  [-81, 41],
  [-81, 47],
  [-72, 47],
  [-72, 41],
  [-81, 41]
]]);

turf.booleanPointInPolygon(pt, poly);
//= true

注意：注意 lat/lng 正确指向您正在使用的任何库！

对于您来说，多边形将是地图的边界点。请注意，该库并不假设您有一个漂亮、整洁的“4 角正方形”地图视图（当然，在地球上它不完全是正方形），但您需要将地图视图的 4 角正方形转换为5个边缘点。（第一点和最后一点相同）。

然后您可以将标记的 lat/lng 翻译成“pt”并用它来询问引擎的问题。

对于您的点（标记）是否在边界（地图视图）中，结果应该是直观的true/false。

另一个注意事项。注意如何指定边界点。单击讨论“多边形/多边形”的页面中的 link。您想遵循简单 MapView 的多边形规则。如果您以错误的顺序指定边界点，它可能会以意想不到且完全混乱的方式对其进行解释。

Polygon 的 link 详细讨论了它，但我会提请您注意以下部分：

3.1.6.  Polygon

   To specify a constraint specific to Polygons....

   o  A linear ring MUST follow the right-hand rule with respect to the
      area it bounds, i.e., exterior rings are counterclockwise...

检测标记是否在视点内

Detect if marker is in view point

javascript

android

ios

react-native

react-native-maps