React Native MapView 使 GeoJson 可点击

Question

我有一个湖泊和河流的 GeoJSON 数据。我正在使用下面的代码显示它们。

<MapView.Geojson
          geojson={barajVeGolet}
          strokeColor="#39A2DB"
          fillColor="#D0E8F2"
          strokeWidth={3}
        />

此组件呈现地图中的数据，如下图所示。

MapView.Geojson Component display example

我希望当用户点击这个湖内的任何地方时出现一个弹出窗口，就像一个标记。

我试过的：

我用 TouchableOpacity 组件包装了 MapView.Geojson，以供使用它的 onPress 属性。

<TouchableOpacity onPress={onPress}>
        <MapView.Geojson
          geojson={barajVeGolet}
          strokeColor="#39A2DB"
          fillColor="#D0E8F2"
          strokeWidth={3}
        ></MapView.Geojson>
    </TouchableOpacity>

我使用了 MapView.Geojson

的 onPress 属性

<MapView.Geojson
  geojson={barajVeGolet}
  strokeColor="#39A2DB"
  fillColor="#D0E8F2"
  strokeWidth={3}
  onPress={onPress}
></MapView.Geojson>

我在 MapView.Geojson 中放置了一个 Callout 组件，其中包含文本

<MapView.Geojson
  geojson={barajVeGolet}
  strokeColor="#39A2DB"
  fillColor="#D0E8F2"
  strokeWidth={3}
>
    <MapView.Callout>
      <View style={{ width: 200 }}>
        <Text style={styles.barajInfoTitle}>Test</Text>
      </View>
    </MapView.Callout>
</MapView.Geojson>

有没有什么方法可以像 Marker 组件一样点击 Geojson 或 Polygon 组件内的任意位置打开弹出窗口？

Answer 1

不幸的是，当使用 GeoJson 时无法设置自定义标注，其 Marker 模块不支持它。 https://github.com/react-native-maps/react-native-maps/blob/master/lib/components/Geojson.js#L156

但是，您可以针对此用例使用自定义解决方案。

我已经为 GeoJson

添加了 onPress 功能

<Geojson
   tappable
   image={require("assets/markers/bicycle/seasonal-tour.png")}
   geojson={your-data}
   strokeColor={colors.theme.light.routeColor}
   strokeWidth={7}
   onPress={(data: any) => {
     this.props.myInfoModal.openModal(); // For Modalize
     this.setState({modalVisibility: true }); // For Classic Modal
   }}
/>

您可以使用经典模态或模态化

然后你可以将数据明细显示到

React Native MapView 使 GeoJson 可点击

React Native MapView make GeoJson clickable

javascript

geojson

reactjs

react-native

react-native-maps