react-native-maps - 多边形 onPress 事件

Question

我正在使用 react-native-maps 并在我的地图上渲染我希望可以按下的多边形。

我的问题是 AFAIK react-native-maps Polygon 没有 onPress 事件。

我也考虑过用 Touchable 组件包裹每个 Polygon，但我的问题是（再一次，AFAIK...），react-native-maps 中的叠加层必须是 MapView 组件的直接子级，否则他们不会渲染...

有什么方法可以让它工作吗？

谢谢！
乌里

Answer 1

我今天正在处理这个问题，我现在的解决方法是在同一坐标上放置一个单独的 MapView.Marker 组件，它确实分配了一个 onPress 道具。

您必须努力让它与多边形或其他类似行为相匹配。

无论如何我都会关注这个问题以获得更好的解决方案:)

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 
 }


}

Answer 3

现在 Polygon 上有一个 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')}
/>

react-native-maps - 多边形 onPress 事件

react-native-maps - polygon onPress event

maps

polygon

react-native