使用GeoFirestore和Firestore我正在尝试在用户周围的地图上放置数据点。目前使用1个数据点进行测试以得到初步发现,但地图上没有任何显示。
默认地图以->纬度:3.1467,经度:101.6119
为中心已向数据存储区添加了经度和纬度,名称与上面相同的纬度->纬度:3.1467,经度:101.6119
地图以我的当前位置为中心显示了正确的位置。 -应该将存储在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',
}
});
地图默认显示地图开始位置,该位置设置为我的当前位置/区域
希望有人可以提供帮助或指导我进一步了解。