Question

我正在使用react-native-maps，我正在地图上渲染多边形，我希望它是可压缩的。

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

我还考虑过使用Touchable组件包装每个Polygon，但后来我的问题是（再次，AFAIK ......），react-native-maps中的叠加必须是MapView组件的直接子项，否则他们赢了不渲染......

任何方式让这个工作？

谢谢！
URI

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')}
/>

Answer 2

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

我们的想法是将onPress事件添加到MapView组件中，如下所示：

<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

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

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

无论如何，我会按照这个问题寻求更好的解决方案:)

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

3 个答案: