React Native：如何在 geojson 点上显示标记信息？

Question

我尝试从 geojson 点获取信息，但找不到任何解决方案。

我的 geojson 中的点：

{
                "type": "Feature",
                "properties": {
                    "name": "bridge",
                    "sym": "Waypoint"
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        35.1480779,
                        31.6900743,
                        933
                    ]
                }
            }

标记和航路点完美无缺，我只需要在点击事件上显示信息。

Answer 1

如果您想在每次单击标记时显示来自 geojson 数据的信息，您可以设置来自 geojson 数据的标题或描述的值。下面是 sample code 和代码片段：

import React, { Component } from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import MapView, { Marker, Geojson } from 'react-native-maps';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  map: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});
const myPlace = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {
        name: 'bridge',
        sym: 'Waypoint',
      },
      geometry: {
        type: 'Point',
        coordinates: [64.165329, 48.844287],
      },
    },
  ],
};

class MapApp extends Component {
  
  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={styles.map}
          initialRegion={{
            latitude: 64.165329,
            longitude: 48.844287,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}>
          <Marker
            coordinate={{
              latitude: myPlace.features[0].geometry.coordinates[0],
              longitude: myPlace.features[0].geometry.coordinates[1],
            }}
            title={myPlace.features[0].geometry.type}
            description={myPlace.features[0].properties.name}
          />

          <Geojson
            geojson={myPlace}
            strokeColor="red"
            fillColor="green"
            strokeWidth={2}
          />
        </MapView>
      </View>
    );
  }
}

export default MapApp;

React Native：如何在 geojson 点上显示标记信息？

React Native: How to show marker info on geojson point?

geojson

react-native

react-native-maps