React Native - MapView从JSON文件获取标记坐标

Question

我正在尝试使用React Native构建一个APP。我想显示带有不同标记的地图。标记位于json文件中。这些是我的文件：https://github.com/funkyyy/platzfinder

我能够从json文件中获取坐标，但我不知道如何在地图中显示它们。

我能够将坐标保存到不同的变量中。

比如，如果我把这个片段放到我的appBodyData.js中

let coord = this.props.data.map(function(coordinates, index){
        var latitudes = coordinates.geometry.coordinates[0];
        var long = coordinates.geometry.coordinates[1];

          return(
            <View>
                <Text>
                Lat: {latitudes}
                </Text>
                <Text>
                Long: {long}
                </Text>
            </View>
          )
      });

    return (
        <View style={styles.container}>{coord}</View>
    ); 

我可以将其显示为文本。

我目前的代码是

render(){


      let coord = this.props.data.map(function(coordinates, index){
        var lat = coordinates.geometry.coordinates[1];
        var long = coordinates.geometry.coordinates[0];
      });

    return (
      <View style={styles.container}>

      <MapView style={styles.map}
        showsUserLocation
        >
        <MapView.Marker
          coordinate={{
            latitude: {lat},
            longitude: {long},
          }}
        />
      </MapView>

      </View>
    );
  }

但它没有告诉我标记：/

我的错在哪里？

或者有更好的方法来解决这个问题吗？

对于未来，Json文件将会成长，我需要显示多个标记。

这会有用吗？

Answer 1

@Oma

我更新了我的代码。我能够获取坐标并显示出来。

我收到警告，它不会放大我当前的位置。

https://i.ibb.co/swwF5sb/IMG-0236.png

知道怎么解决吗？

我目前的代码

import React from 'react';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
import Marker from 'react-native-maps';

import {
  View,
  Text,
  StyleSheet,
  Button,
  LATITUDE,
  LONGITUDE,
  LATITUDE_DELTA,
  LONGITUDE_DELTA,
} from "react-native";

class Spielplaetze extends React.Component {
  constructor() {
      super();
      this.state = {
        region: {
          latitude: LATITUDE,
          longitude: LONGITUDE,
          latitudeDelta: LATITUDE_DELTA,
          longitudeDelta: LONGITUDE_DELTA
        },
        markers: [],
        loaded: false
      }

    }

    componentDidMount() {
      navigator.geolocation.getCurrentPosition(
        (position) => {
        console.log(position);
          this.setState({
            region: {
              latitude: position.coords.latitude,
              longitude: position.coords.longitude,
              latitudeDelta: LATITUDE_DELTA,
              longitudeDelta: LONGITUDE_DELTA,
            }
          });
        },
        (error) => this.setState({ error: error.message }),
       { enableHighAccuracy: false, timeout: 200000, maximumAge: 1000 },
      );
      this.getLocations()
    }


    getLocations(){
    return fetch('http://media-panda.de/cologne.geojson')
    .then(response => response.json())
    .then(responseData =>{
       var markers = [];

        for (var i = 0; i < responseData.features.length; i++) {
          if (responseData.features[i].properties.Torwand != '<Null>'){
            var coords = responseData.features[i].geometry.coordinates;
            var marker = {
              coordinate: {
                latitude: coords[1],
                longitude: coords[0],
              }
            }
            markers.push(marker);
          }
        }
        this.setState({
          markers: markers,
          loaded: true,
        });
      }
    ).done();
  }

  render() {

  return (
      <View style={styles.container}>
      <MapView.Animated
        style={styles.map}
        region={this.state.region}
        showsUserLocation={true}>

       {this.state.markers.map(marker => (
          <MapView.Marker
            coordinate={marker.coordinate}
          />
       ))}
       </MapView.Animated>
      </View>
     );
  }
}

export default Spielplaetze;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  map: {
    width: "100%",
    height: "100%",
  },
})

Answer 2

我的react-native应用程序上有一个标记，我使用它像这样：

<MapView style={styles.mapView}
     region={{
        latitude: userLocation.latitude,
        longitude:userLocation.longitude,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
     }}
   >
      <Marker
         coordinate={{
                      latitude: userLocation.latitude,
                      longitude: userLocation.longitude
                    }}
      />
</MapView>

因此，尝试使用Marker而不是MapView.Marker，应该工作，coordinate的Marker不应该是object。只是纬度和长值。

从https://github.com/react-native-community/react-native-maps您可以添加多个标记，如下所示：

{this.state.markers.map(marker => (
    <Marker
      coordinate={marker.latlng}
      title={marker.title}
      description={marker.description}
    />
  ))}

只需根据您的需要进行调整。