Создание данных и добавление в массив и отображение их на карте не работает правильно? - PullRequest
Новая
       23

Создание данных и добавление в массив и отображение их на карте не работает правильно?

0 голосов
/ 18 ноября 2018

Проблема:

Я создаю реагирующее нативное приложение с интеграцией с картой Google.Вот как я это сделал. 

import React, { Component } from "react";
import { View, Text, StyleSheet, Dimensions } from "react-native";

import { MapView } from "expo";
import Marker from "./Marker";
class Parking extends Component {
  static navigationOptions = {
    title: "Parking",
    headerStyle: {
      backgroundColor: "#06153b"
    },
    headerTintColor: "#fff",
    headerTitleStyle: {
      color: "#ffff"
    }
  };
  constructor(props) {
    super(props);
    this.state = {
      focusedLocation: {
        latitude: 0,
        longitude: 0,
        latitudeDelta: 0.0122,
        longitudeDelta:
          (Dimensions.get("window").width / Dimensions.get("window").height) *
          0.0122
      },
      locationChosen: false,
      placesList: []
    };
  }

  componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      pos => {
        const coordsEvent = {
          nativeEvent: {
            coordinate: {
              latitude: pos.coords.latitude,
              longitude: pos.coords.longitude
            }
          }
        };

        this.pickLocationHandler(coordsEvent);
      },
      err => {
        console.log(err);
        alert("Fetching the Position failed");
      }
    );
  }

  pickLocationHandler = event => {
    const coords = event.nativeEvent.coordinate;
    let placesList = [];
    let places = [];
    this.map.animateToRegion({
      ...this.state.focusedLocation,
      latitude: coords.latitude,
      longitude: coords.longitude
    });
    const apikey = "My API key";
    fetch(
      "https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=" +
        coords.latitude +
        "," +
        coords.longitude +
        "&radius=500" +
        "&type=parking" +
        "&key=" +
        apikey
    )
      .then(response => response.json())
      .then(responseJson => {
        if (responseJson) {
          placesList = responseJson.results;
          console.log(placesList);
          placesList.map((el, index) => {
            const place = {
              title: el.name,
              coordinates: {
                latitude: el.geometry.location.lat,
                longitude: el.geometry.location.lng
              }
            };
            places[index] = place;
          });
        }
      });

    if (places) {
      this.setState({ placesList: places });
      console.log(places);
    }
    this.setState({ locationChosen: true });
  };

  render() {
    let marker = null;
    if (this.state.locationChosen) {
      marker = <MapView.Marker coordinate={this.state.focusedLocation} />;
    }
    const places = this.state.placesList;
    return (
      <View style={styles.container}>
        <MapView
          initialRegion={this.state.focusedLocation}
          showsUserLocation={true}
          style={styles.map}
          onPress={this.pickLocationHandler}
          ref={ref => (this.map = ref)}
        >
          {places.map((place, index) => {
            <MapView.Marker
              coordinate={place.coordinates}
              title={place.title}
            />;
          })}
          {marker}
        </MapView>
      </View>
    );
  }
}

export default Parking;

const styles = StyleSheet.create({
  container: {
    width: "100%",
    alignItems: "center",
    paddingBottom: 10,
    paddingLeft: 10,
    paddingRight: 10,
    paddingTop: 10
    // backgroundColor:"#192f6a"
  },
  map: {
    height: "100%",
    width: "100%"
  },
  button: {
    margin: 8
  }
});

Но на карте ничего не отображается.Когда я консоль журнала места, как это. 

if (places) {
          this.setState({ placesList: places });
          console.log(places);
        }

Это показывает пустой массив.Если я утешаю журнал placeList внутри выборки, он показывает результаты.Может ли кто-нибудь помочь мне решить эту проблему и изменить Мой код, чтобы показать маркеры для мест, которые я получил из результата выборки из Google API на карте ?.Большое спасибо !!.

1 Ответ

0 голосов
/ 18 ноября 2018

Я довольно новичок во всем этом, но я бы сказал пару вещей:

1 - вы объявляете 'place' как const const place = ..., но вы также пытаетесь обновить его в цикле карты, поэтому я предполагаю, что это не сработает. Используйте var place = ... вместо?

2 - вместо places[index] = place работает places.push(place)?

...