React Native Maps - 多边形 onPress 事件

Question

我正在使用react-native-maps，并在地图上呈现多边形。 我希望这些多边形可以被点击。

我的问题是，据我所知，react-native-maps的Polygon没有onPress事件。

我还考虑过用Touchable组件包装每个Polygon，但是我的问题是（再次，据我所知...），在react-native-maps中，覆盖层必须是MapView组件的直接子元素，否则它们将无法呈现...

有什么方法可以让这个工作？

谢谢！ Uri

- Uri Klar

Answer 1

现在多边形上有一个onPress事件。

参考文献：https://github.com/react-community/react-native-maps/blob/master/docs/polygon.md

<Polygon
    coordinates={this.props.coordinates}
    strokeColor="rgba(0, 0, 0, 1)"
    strokeWidth={3}
    tappable={true}
    onPress={() => this.onPress('foo')}
/>

- heren

Answer 2

好的，我从https://github.com/airbnb/react-native-maps/issues/488得到了这个答案。

思路是在MapView组件中添加一个onPress事件，如下所示：

<MapView onPress={ this.mapPressed }>

接下来，使用geojson-js-utils，您可以执行以下操作（意味着双数组是有意的，这是该函数的工作方式）：

import { pointInPolygon } from 'geojson-utils';

mapPressed(event) {
 const pointCoords = [event.nativeEvent.coordinate.longitude,
                     event.nativeEvent.coordinate.latitude];

 const polygonCoords = [ [lngA, latA], [lngB, latB] ... etc... ];

 const  inPolygon = pointInPolygon(
   { 'type': 'Point', 'coordinates': pointCoords },
   { 'type': 'Polygon', 'coordinates': [plotCoords] }
 );

 if (inPolygon) {
  // do something 
 }


}

- Uri Klar

Answer 3

我今天在处理这个问题，暂时的解决方法是在相同的坐标上放置一个单独的MapView.Marker组件，该组件具有分配的onPress属性。

您需要努力使其与多边形或其他类似行为匹配。

无论如何，我会关注此问题以获取更好的解决方案 :)

- Felipe92

---

谢谢！我会尝试一下。使用标记不需要用户触摸标记的确切坐标吗？ - Uri Klar

嗯，是的，但我使用了自定义标记，指定了一个合理的大小，所以用户可以触摸，但实际上不会呈现任何视觉效果。 - Felipe92

现在先将你的答案标记为正确的，因为它运行正常 :-) 你有没有根据多边形大小设置标记大小的好方法，还是给它一个静态大小？ - Uri Klar

是的，这更像是一个丑陋的解决方法。不过我最终还是设置了一个静态大小，因为在我的情况下，整个多边形可触摸并不是那么重要。实际上，我使用了一张需要放置在那里的图片。但你可能至少能够用另一个标记近似布局多边形。祝你好运！ - Felipe92

我发现了一个更好的答案并发布了它。 - Uri Klar