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

【问题标题】：React Native: How to show marker info on geojson point?React Native：如何在geojson点上显示标记信息？
【发布时间】：2021-05-06 13:03:13
【问题描述】：

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

我的 geojson 中的要点：

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

标记和航路点完美运行，我只需要显示点击事件的信息。

【问题讨论】：

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

【解决方案1】：

如果您希望每次单击标记时都显示来自 geojson 数据的信息，您可以从 geojson 数据中设置标题或描述的值。下面是sample code 和代码 sn-p：

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;

【讨论】：