React Native - MapView получает координаты для маркеров из файла JSON - PullRequest
Новая
       0

React Native - MapView получает координаты для маркеров из файла JSON

0 голосов
/ 13 февраля 2019

Я пытаюсь построить приложение с React Native.Я хочу показать карту с разными маркерами.Маркеры находятся в файле 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 будет расти, где мне нужно отобразить несколько маркеров.

Будет ли это работать?

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

@ 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%",
  },
})
0 голосов
/ 13 февраля 2019

У меня есть маркер в моем приложении-адаптере, и я использовал его следующим образом: 

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

Просто адаптируйте их под свои нужды.

...