react native konum izleme ve marker olarak ekleme

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
 
import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
    TouchableOpacity,
    PermissionsAndroid,
    Platform
} from 'react-native';
 
import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import Geolocation from "@react-native-community/geolocation";
import MapView from "react-native-map-clustering";
 
import  {PROVIDER_GOOGLE,Marker,Polygon,Circle} from 'react-native-maps';
import NativePermissionsAndroid from "react-native/Libraries/PermissionsAndroid/NativePermissionsAndroid";
export default class App extends React.Component{
  constructor() {
    super();
    this.state = {
      latitude:'',
      longitude:''
    }
  }
 
  componentDidMount = async () =>{
 
    if(Platform.OS == 'android'){
      const response = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,{
         'title':'MapsAndGeo',
         'message':"Konumunuzu istiyoruzzz"
      })
 
    }else{
      Geolocation.requestAuthorization();
    }
 
    Geolocation.getCurrentPosition(
        position => {
          const { coords:{latitude,longitude}} = position;
          this.setState( {latitude,longitude})
          console.log(latitude)
        },
        error => {
          console.log(error)
        }
    );
 
       // bu da farklı bir izlemeyi durdurma seçeneği
 
  }
 
  componentWillMount() {
    Geolocation.clearWatch(this.watchID) // farklı bir sayfaya geçtiğimizde izleme durdurulacak
  }
 
  
 
  render(){
    const { latitude,longitude } = this.state;
    return <SafeAreaView>
      <View style={styles.container}>
 
        <MapView
            provider={PROVIDER_GOOGLE}
            style={styles.map}
 
            region={{
              latitude: latitude,
              longitude: longitude,
              latitudeDelta: 0.015,
              longitudeDelta: 0.0121,
            }}
            showsUserLocation={true}
          //  followUserLocation={true}
        >
          <Marker coordinate={{latitude,longitude}} />
        </MapView>
      </View>
    </SafeAreaView>
  }
}
 
const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 800,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.