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,
  },
});

react native map clustering

1
npm install react-native-map-clustering --save

import ederken önceki MapView’i silmeyi unutma

1
import MapView from "react-native-map-clustering";

örnek mapview

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<MapView
            provider={PROVIDER_GOOGLE}
            style={styles.map}
 
            initialRegion={{
              latitude: 41.0538538,
              longitude: 28.805605,
              latitudeDelta: 0.515,
              longitudeDelta: 0.0121,
            }}
        >
          <Marker coordinate={{latitude: 41.0538531, longitude: 28.805605}} />
          <Marker coordinate={{latitude: 41.0577531, longitude: 28.808605}} />
          <Marker coordinate={{latitude: 41.0518531, longitude: 28.801605}} />
          <Marker coordinate={{latitude: 41.0588531, longitude: 28.801105}} />
 
        </MapView>

react native maps drag ile koordinat alma

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
<MapView
            provider={PROVIDER_GOOGLE}
            style={styles.map}
 
            region={{
              latitude: 41.0538538,
              longitude: 28.805605,
              latitudeDelta: 0.015,
              longitudeDelta: 0.0121,
            }}
        >
          <Marker
              draggable={true}
              onDrag={(e) =>console.log(e.nativeEvent.coordinate)}
              onDragStart={(e) =>console.log(e.nativeEvent.coordinate)}
              onDragEnd={(e) =>alert(e.nativeEvent.coordinate.latitude)}
              title={"212"}
              description={"AVM"}
              coordinate={{
                latitude: 41.0538531,
                longitude: 28.805605,
                latitudeDelta: 0.015,
                longitudeDelta: 0.0120,
              }} >
 
          </Marker>
        </MapView>

react native map circle kullanımı

1
2
3
4
5
6
7
8
9
<Circle
                 onPress={()=>alert('tıklandı')}
                 strokeWidth={3}
                 strokeColor={"red"}
                 radius={100}
                 fillColor={"yellow"}
                 center={{latitude: 41.051873, longitude: 28.809529}}
 
             />

react native map polygons

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<MapView
            provider={PROVIDER_GOOGLE}
            style={styles.map}
 
            region={{
              latitude: 41.0538538,
              longitude: 28.805605,
              latitudeDelta: 0.015,
              longitudeDelta: 0.0121,
            }}
        >
             <Polygon
                 onPress={()=>alert('tıklandı')}
                 strokeWidth={3}
                 strokeColor={"red"}
                 fillColor={"yellow"}
                 tappaple={true}
                 coordinates={[
               {latitude: 41.051873, longitude: 28.809529},
               {latitude: 41.050525, longitude: 28.809171},
               {latitude: 41.051896, longitude: 28.812212}
             ]} />
        </MapView>

react native maps marker basit işlemler

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
<MapView
            provider={PROVIDER_GOOGLE}
            style={styles.map}
 
            region={{
              latitude: 41.0538538,
              longitude: 28.805605,
              latitudeDelta: 0.015,
              longitudeDelta: 0.0121,
            }}
        >
            <Marker
                onPress={()=>alert("Marker Tıklandı")}
                onDrag={()=>alert("kaydırma")}
                onDragEnd={()=>alert("kaydırma bitti")}
                draggable={true}
                title={"212"}
                description={"AVM"}
                pinColor={"blue"}
                opacity={0.5}
                coordinate={{
              latitude: 41.0538538,
              longitude: 28.805605,
              latitudeDelta: 0.015,
              longitudeDelta: 0.0121,
            }} />
        </MapView>

react native google maps android ve iosda çalıştırma

ilk önce bir key alacaksınız google map android sdk ve ios sdk etkinleştirerek.

sonra AndroidManifest.xml dosyamıza

üst tarafa bu izinleri ekle.

1
2
<uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

yine aynı dosyada alt taraflarda application içine;

1
2
3
4
<meta-data
          android:name="com.google.android.geo.API_KEY"
          android:value="AIzaSyA2lytwbh-gqmVYQFzxELeijogKAKYYJdI" />
      <uses-library android:name="org.apache.http.legacy" android:required="false" />

ios google maps çalıştırmak için ayarlar

ios->ProjeAdı->AppDelegate.m dosyasında “@implementation AppDelegate” üstüne

1
#import <GoogleMaps/GoogleMaps.h>

ekliyoruz. yine aynı dosyada “”- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions”” yazan başlangıç kısmının bitişinden hemen önce return yes var. onun üstüne;

1
[GMSServices provideAPIKey:@"APIKEY"];

ios->Podfile dosyasını açıyoruz. ilk “Target xx Do” altına hemen;

1
2
  rn_path = '../node_modules/react-native'
  rn_maps_path = '../node_modules/react-native-maps'

bu target bitmeden hemen önce

1
2
3
4
pod 'react-native-maps', path: rn_maps_path
  pod 'react-native-google-maps', path: rn_maps_path
  pod 'GoogleMaps'
  pod 'Google-Maps-iOS-Utils'

bak buradan bakabilirsiniz.
https://github.com/react-native-maps/react-native-maps/blob/master/docs/installation.md

örnek app.js

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
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, {PROVIDER_GOOGLE} 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();
    }
 
    
 
  render(){
    return <SafeAreaView>
      <View style={styles.container}>
 
        <MapView
            provider={PROVIDER_GOOGLE}
            style={styles.map}
            region={{
              latitude: 37.78825,
              longitude: -122.4324,
              latitudeDelta: 0.015,
              longitudeDelta: 0.0121,
            }}
        >
        </MapView>
      </View>
    </SafeAreaView>
  }
}
 
const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

react native google maps kurulumu

1
2
3
4
npm install react-native-maps --save-exact
cd ios
pod install
cd ..

bunları sırayla uyguluyoruz.

örnek kullanımı;

1
import MapView from 'react-native-maps';

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
  render(){
    return <SafeAreaView>
      <View style={styles.container}>
 
        <MapView
 
            style={styles.map}
            region={{
              latitude: 37.78825,
              longitude: -122.4324,
              latitudeDelta: 0.015,
              longitudeDelta: 0.0121,
            }}
        >
        </MapView>
      </View>
    </SafeAreaView>
  }
}
 
const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

bu basit hali ve ekranda gözüken ilk hali tabi. ayarlarımızı yapmamız lazım.

React Native Harita İzleme Özelliği Durdurma Yöntemleri

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
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
 
import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
    TouchableOpacity
} from 'react-native';
 
import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import Geolocation from "@react-native-community/geolocation";
export default class App extends React.Component{
  constructor() {
    super();
    this.state = {
      latitude:'',
      longitude:''
    }
  }
 
  componentDidMount() {
      Geolocation.requestAuthorization();
      this.watchID = Geolocation.watchPosition(
          position => {
            const { coords:{latitude,longitude}} = position;
            this.setState( {latitude,longitude})
          },
          error => {
 
          }
      )
 
 
       // bu da farklı bir izlemeyi durdurma seçeneği
 
  }
 
  componentWillMount() {
    Geolocation.clearWatch(this.watchID) // farklı bir sayfaya geçtiğimizde izleme durdurulacak
  }
 
  _stop = () => {
    Geolocation.stopObserving()
  }
 
  render(){
    return <SafeAreaView>
      <View style={{justifyContent:'center',alignItems:'center'}}>
        <Text>Latitude: {this.state.latitude}</Text>
        <Text>Longitude: {this.state.longitude}</Text>
      <TouchableOpacity onPress={this._stop}>
        <Text>Durdur</Text>
      </TouchableOpacity>
      </View>
    </SafeAreaView>
  }
}

React Native Geolocation Konum İzleme

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
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
 
import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';
 
import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import Geolocation from "@react-native-community/geolocation";
 
export default class App extends React.Component{
  constructor() {
    super();
    this.state = {
      latitude:'',
      longitude:''
    }
  }
 
  componentDidMount() {
      Geolocation.requestAuthorization();
      Geolocation.watchPosition(
          position => {
            const { coords:{latitude,longitude}} = position;
            this.setState( {latitude,longitude})
          },
          error => {
 
          }
      )
  }
 
  render(){
    return <SafeAreaView>
      <View style={{justifyContent:'center',alignItems:'center'}}>
        <Text>Latitude: {this.state.latitude}</Text>
        <Text>Longitude: {this.state.longitude}</Text>
 
      </View>
    </SafeAreaView>
  }
}