React Native MapView 使 GeoJson 可点击

如何解决React Native MapView 使 GeoJson 可点击

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

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

该组件渲染地图中的数据，如下图所示。

MapView.Geojson Component display example

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

我尝试过的：

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

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

我使用了 onPress 的 MapView.Geojson 属性

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

我在带有文本的 Callout 中放置了一个 MapView.Geojson 组件

<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>

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

解决方法

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

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

我为 onPress 添加了 GeoJson 功能

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

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

• https://github.com/react-native-modal/react-native-modal
• https://github.com/jeremybarbet/react-native-modalize

然后您可以将数据详细信息显示到