import React, {Component} from 'react';
import {Platform,StyleSheet,Text,View,TouchableOpacity,Alert,Image,Button} from 'react-native';
import { Dialog } from 'react-native-simple-dialogs';
import AsyncStorage from '@react-native-community/async-storage';
import {KeyboardAvoidingView} from 'react-native';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
import datum from './data';
import { Marker } from 'react-native-maps';
import Parse from "parse/react-native";
import Geolocation from 'react-native-geolocation-service';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
const homePlace = { description: 'Home', geometry: { location: { lat: 48.8152937, lng: 2.4597668 } }};
const workPlace = { description: 'Work', geometry: { location: { lat: 48.8496818, lng: 2.2940881 } }};
export default class Home extends React.Component{
constructor(props) {
super(props);
this.state = {
lat:13.0474878,
long:80.0689267,
picklat:0,
picklong:0,
droplat:0,
droplong:0,
curautostate:'pick',
curautostateplaceholder:'Enter your pick up location',
distance:0
}
}
componentDidMount() {
Geolocation.requestAuthorization();
Geolocation.getCurrentPosition(
(position) => {
this.setState({lat: position.coords.latitude});
this.setState({long: position.coords.longitude});
this.setState({picklat: position.coords.latitude});
this.setState({picklong: position.coords.longitude});
this.setState({droplat: position.coords.latitude});
this.setState({droplong: position.coords.longitude});
console.log("lat", this.state.lat);
console.log("long", this.state.long);
},
(error) => {
// See error code charts below.
console.log(error.code, error.message);
Alert.alert(
'Please enable the location service',
error.message,
[
{text: 'OK', onPress: () => console.log('has to exit')},
],
{cancelable: false},
);
},
{ enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
);
}
carCalled=(number)=>{
return fetch(`https://maps.googleapis.com/maps/api/distancematrix/json?origins=${this.state.picklat},${this.state.picklong}&destinations=${this.state.droplat},${this.state.droplong}&key=AIzaSyAGZXb2kgT5myfDuGAw7w5s9wc9IOCYyHc`)
.then((response) => response.json())
.then((responseJson) => {
this.setState({distance:responseJson.rows[0].elements[0].distance.value/1000})
console.log('sd',this.state.distance);
if(this.state.distance<=1||this.state.distance>60){
Alert.alert('Please select valid location')
}else {
}
})
.catch((error) =>{
Alert.alert(error)
});
}
toogleauto=()=>{
if(this.state.curautostate=='pick'){
this.setState({curautostate:'drop'})
this.setState({curautostateplaceholder:'Enter your drop location'})
}else if(this.state.curautostate=='drop'){
this.setState({curautostate:'pick'})
this.setState({curautostateplaceholder:'Enter your pick location'})
}else {
}
}
render() {
return (
<View style={{backgroundColor:datum.placeholderTextColor}}>
<MapView
provider={PROVIDER_GOOGLE}
style={{flex:1,height:'50%'}}
region={{
latitude: this.state.lat,
longitude:this.state.long,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}}
showsUserLocation={true}
/>
</View>
;
}
}
const styles = StyleSheet.create({
container:{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
我正在尝试使用android模拟器运行该应用程序,当我运行该应用程序时会崩溃,并且在屏幕快照中看到它说喜欢的日志,但是当在没有地图视图的情况下运行该应用程序时,该应用程序运行正常,但我没有地图视图会发生什么情况,有人可以帮我解决过去三天来遇到的这种问题