Mainscreen.js
3.38 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Icon } from 'native-base'; // 추가된 코드
import React from 'react'
import {Marker} from 'react-native-maps'
import Constants from 'expo-constants';
import * as Location from 'expo-location';
import MapView from "./ClusteredMapView";
export default class MainScreen extends Component {
// navigationOptions 코드 추가
static navigationOptions = {
headerLeft: <Icon name='ios-camera' style={{ paddingLeft:10 }}/>,
title: 'PME Service',
headerRight: <Icon name='ios-send' style={{ paddingRight:10 }}/>,
}
constructor(props) {
super(props)
this.state= {
location:null,
errorMsg:null
}
}
componentDidMount() {
(async () => {
let { status } = await Location.requestPermissionsAsync();
if (status !== 'granted') {
this.setState({
errorMsg:'Permission to access location was denied'
})
}
let location = await Location.getCurrentPositionAsync({});
console.log(location)
this.setState({
location
},() => {
console.log(this.state.location.coords.latitude)
})
})();
}
render() {
return (
this.state.location?
<MapView
style={{ flex: 1 }}
initialRegion={ { latitude: this.state.location.coords.latitude, longitude: this.state.location.coords.longitude
,latitudeDelta: 0.0922, longitudeDelta: 0.0421}}
zoomEnabled={true}
pitchEnabled={true}
showsUserLocation={true}
followsUserLocation={true}
showsCompass={true}
showsBuildings={true}
showsTraffic={true}
showsIndoors={true}
extent={512}>
<Marker coordinate={{ latitude: this.state.location.coords.latitude+0.1, longitude: this.state.location.coords.longitude }} />
<Marker coordinate={{ latitude: this.state.location.coords.latitude+0.5, longitude: this.state.location.coords.longitude }} />
<Marker coordinate={{ latitude: this.state.location.coords.latitude+0.0001, longitude: this.state.location.coords.longitude }} />
<Marker coordinate={{ latitude: this.state.location.coords.latitude+0.0003, longitude: this.state.location.coords.longitude }} />
<Marker coordinate={{ latitude: this.state.location.coords.latitude+0.03, longitude: this.state.location.coords.longitude }} />
<Marker coordinate={{ latitude: this.state.location.coords.latitude+0.05, longitude: this.state.location.coords.longitude }} />
<Marker coordinate={{ latitude: this.state.location.coords.latitude+0.01, longitude: this.state.location.coords.longitude }} />
<Marker coordinate={{ latitude: this.state.location.coords.latitude+0.2, longitude: this.state.location.coords.longitude }} />
<Marker coordinate={{ latitude: this.state.location.coords.latitude+0.3, longitude: this.state.location.coords.longitude }} />
<Marker coordinate={{ latitude: this.state.location.coords.latitude+0.7, longitude: this.state.location.coords.longitude }} />
</MapView>:<Text>Loading..</Text>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});