React Native MapView 使 GeoJson 可点击答案

【问题标题】：React Native MapView make GeoJson clickableReact Native MapView 使 GeoJson 可点击
【发布时间】：2021-07-06 09:48:56
【问题描述】：

我有一个湖泊和河流的 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>

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

【问题讨论】：

标签： javascript reactjs react-native geojson react-native-maps

【解决方案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
   }}
/>

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

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

【讨论】：