質問編集履歴

1

ソースコード追加

2020/09/16 20:47

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -9,3 +9,81 @@
9
9
  ### 質問
10
10
 
11
11
  リンクの動画を参考しながら、地図をonPressした時にマーカーがセットされる実装がうまくいきません。react nativeではどのように実現するのでしょうか?
12
+
13
+ ### コード
14
+
15
+ ```App
16
+
17
+ import MapView, {PROVIDER_GOOGLE, Marker} from 'react-native-maps'; // remove PROVIDER_GOOGLE import if not using Google Maps
18
+
19
+ import React, {useState} from 'react';
20
+
21
+ import {View, StyleSheet, Alert} from 'react-native';
22
+
23
+
24
+
25
+ export default function App() {
26
+
27
+ const [markers, setMarkers] = useState([]);
28
+
29
+
30
+
31
+ return (
32
+
33
+ <MapView
34
+
35
+ provider={PROVIDER_GOOGLE} // remove if not using Google Maps
36
+
37
+ style={styles.map}
38
+
39
+ initialRegion={{
40
+
41
+ latitude: 35.681236,
42
+
43
+ longitude: 139.767125,
44
+
45
+ latitudeDelta: 0.025,
46
+
47
+ longitudeDelta: 0.0221,
48
+
49
+ }}
50
+
51
+ onPress={(e) => {
52
+
53
+ setMarkers((current) => [
54
+
55
+ ...current,
56
+
57
+ {
58
+
59
+ lat: e.latlng.lat(),
60
+
61
+ lng: e.latLng.lng(),
62
+
63
+ time: new Date(),
64
+
65
+ },
66
+
67
+ ]);
68
+
69
+ }}>
70
+
71
+ {markers.map((marker) => (
72
+
73
+ <Marker
74
+
75
+ key={marker.time.toISOString()}
76
+
77
+ position={{lat: marker.lat, lng: marker.lng}}
78
+
79
+ />
80
+
81
+ ))}
82
+
83
+ </MapView>
84
+
85
+ );
86
+
87
+ }
88
+
89
+ ```