根据我的代码,Google Maps
显示用户的位置(用蓝色标记表示)在旧金山(我在纽约)。为什么不显示用户的当前位置?我在代码的latitude
和longitude
部分中未包含任何手动坐标。这一切都充满活力。
为什么这样做?
这是App.js
档案:
import React, { Component } from 'react';
import { StyleSheet, View, TextInput, Dimensions } from 'react-native';
import { Input, SearchBarSection } from './src/components/common';
import RetrievePlaces from './src/components/common/RetrievePlaces';
import MapView from 'react-native-maps';
const {width, height} = Dimensions.get('window')
const SCREEN_HEIGHT = height
const WIDTH = width
const ASPECT_RATIO = width / height
const LATITUDE_DELTA = 0.0922
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO
export default class App extends Component<{}> {
constructor(props) {
super(props);
this.state = {
initialPosition: {
latitude: 0,
longitude: 0,
latitudeDelta: 0,
longitudeDelta: 0
},
markerPosition: {
latitude: 0,
longitude: 0
}
}
}
watchID: ?number = null;
componentDidMount() {
navigator.geolocation.getCurrentPosition((position) => {
var lat = parseFloat(position.coords.latitude)
var long = parseFloat(position.coords.longitude)
var initialRegion = {
latitude: lat,
longitude: long,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
}
this.setState({initialPosition: initialRegion})
this.setState({markerPosition: initialRegion})
},
(error) => alert(JSON.stringify(error)),
{enableHighAccuracy: true, timeout: 2000, maximumAge: 1000})
this.watchID = navigator.geolocation.watchPosition((position) => {
var lat = parseFloat(position.coords.latitude)
var long = parseFloat(position.coords.longitude)
var lastRegion = {
latitude: lat,
longitude: long,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
}
this.setState({initialPosition: lastRegion})
this.setState({markerPosition: lastRegion})
})
}
componentWillUnmount() {navigator.geolocation.clearWatch(this.watchID)}
render() {
return (
<MapView
style={styles.map}
region={this.state.initialPosition}>
<SearchBarSection>
<Input
placeholder={"Search.."}
/>
<RetrievePlaces/>
</SearchBarSection>
<MapView.Marker
coordinate={this.state.markerPosition}>
<View style={styles.radius}>
<View style={styles.marker}/>
</View>
</MapView.Marker>
</MapView>
);
}
}
const styles = StyleSheet.create({
radius: {
height: 50,
width: 50,
borderRadius: 50 / 2,
overflow: 'hidden',
backgroundColor: 'rgba(0, 122, 255, 0.1)',
borderWidth: 1,
borderColor: 'rgba(0, 112, 255, 0.3)',
alignItems: 'center',
justifyContent: 'center'
},
marker: {
height: 20,
width: 20,
borderRadius: 3,
borderColor: 'white',
borderRadius: 20 / 2,
overflow: 'hidden',
backgroundColor: '#007AFF'
},
map: {
top: 0,
left: 0,
bottom: 0,
right: 0,
position: 'absolute'
}
});