使用GeoFireStore在Firestore上的地图上未显示点

时间:2019-05-25 05:12:59

标签: firebase react-native google-cloud-firestore expo geofirestore

使用GeoFirestore和Firestore我正在尝试在用户周围的地图上放置数据点。目前使用1个数据点进行测试以得到初步发现,但地图上没有任何显示。

默认地图以->纬度:3.1467,经度:101.6119

为中心

已向数据存储区添加了经度和纬度,名称与上面相同的纬度->纬度:3.1467,经度:101.6119

enter image description here 地图以我的当前位置为中心显示了正确的位置。 -应该将存储在Firestore中的数据点的数据四处显示。

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants, MapView, Permissions, Location, Status } from 'expo';
import * as firebase from "firebase";
require("firebase/firestore");
import { GeoFirestore } from "geofirestore";

// Fill in as appropriate
const FirebaseConfig = {
    // Initialize Firebase
    apiKey: xx
    authDomain: xx
    databaseURL: xx
    projectId: xx
    storageBucket: xx
    messagingSenderId: xx
};

export default class LocationPermission extends Component {
  state = {
    region: { latitude: 3.1467, longitude: 101.6119, latitudeDelta: 0.0922, longitudeDelta: 0.0421 }
  }

  async componentDidMount() {
    firebase.initializeApp(FirebaseConfig);
    // Avoid deprecation warning
    firebase.firestore().settings({
      timestampsInSnapshots: true
    });
    // Get the user's location
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    let location = await Location.getCurrentPositionAsync({});
    this.setState({
      region: {
        latitude: location.coords.latitude,
        longitude: location.coords.longitude,
        latitudeDelta: 0.01,
        longitudeDelta: 0.01
      }
    });
    // Just a simple collection with one or two premade items
    const locationsRef = firebase.firestore().collection("/Airports");
    const geoFirestore = new GeoFirestore(locationsRef);
    const query = geoFirestore.query({
      center: [this.state.region.latitude, this.state.region.longitude],
      radius: 100
    });
    query.on("ready", () => this.setState({ loading: false }));
    query.on("key_entered", (key, coords, distance) => {
      console.log(key);
    });
  }

  render() {
    return (
      <MapView
        ref={map => (this._mapView = map)}
        style={styles.map}
        showsUserLocation={true}
        showsPointsOfInterest={true}
        followsUserLocation={true}
        provider="google"
        region={this.state.region}
      ></MapView>
    );
  }
}

export {LocationPermission}

const styles = StyleSheet.create({
  map: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  }
});

地图默认显示地图开始位置,该位置设置为我的当前位置/区域

  • 因此不确定当用户位置和地图中心的其他所有内容都呈现时为何在地图上什么也不显示

希望有人可以提供帮助或指导我进一步了解。

0 个答案:

没有答案