反应本地地图。标记不会呈现

时间:2020-03-31 00:13:27

标签: expo

我能够从Firebase返回有关标记的所有数据,并将它们存储在array中。

但是我在渲染它们时遇到了麻烦,它不会给我任何错误,但是标记不会显示。

我可以放入一个硬编码的标记,但是无法从数据库中获取所有标记。

这是我从firebase返回的内容

Object {
  "address": "",
  "coordinate": Object {
    "latitude": 30.448975180780916,
    "longitude": -91.06502489274193,
  },
  "description": "lol",
  "image": "somelink",
  "timestamp": 1585608644837,
  "uid": "06qPxLgyzkeTXExqycsGbJnhuNi2",
} 

import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import MapView, { Marker } from "react-native-maps";
import * as Location from "expo-location";
import * as Permissions from "expo-permissions";

import * as firebase from "firebase";

class HomeScreen extends Component {
  constructor(props) {
  super(props);
    this.state = {
      region: null,
      markers: []
    };
    this._getLocationAsync();
  }
  componentDidMount() {
    const firestore = firebase.firestore();
    firestore
      .collection("post")
      .get()
      .then(snapshot => {
        snapshot.docs.forEach(doc => {
          this.state.markers = doc.data();
        });
      });
  }
  _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== "granted") console.log("Permission denied");

    let location = await Location.getCurrentPositionAsync({
      enabledHighAccuracy: true
    });
    let region = {
      latitude: location.coords.latitude,
      longitude: location.coords.longitude,
      latitudeDelta: 0.045,
      longitudeDelta: 0.045
    };
    this.setState({ region: region });
  };

  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={{ flex: 1 }}
          region={this.state.region}
          showsUserLocation={true}
        >
      {/* <MapView.Marker
        coordinate={{
          latitude: 30.5044,
          longitude: -90.4612
        }}
        title={"Road damaged"}
        description={"description"}
      /> */}

          {this.state.markers.map((marker, index) => {
            return (
              <MapView.Marker
                key={index}
                coordinate={{
                  latitude: marker.coordinate.latitude,
                  longitude: marker.coordinate.longitude
                }}
                title={"Road damaged"}
                description={"description"}
              ></MapView.Marker>
            );
          })}
        </MapView>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1

  }
});

export default HomeScreen;

0 个答案:

没有答案