react-native-maps/example/examples/StaticMap.js at onPanDrag-ios · Appcom-github/react-native-maps · GitHub

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
113
114
115
116
117
118
import React from 'react';
import {
  StyleSheet,
  View,
  Text,
  Dimensions,
  ScrollView,
} from 'react-native';
import MapView, { Marker, ProviderPropType } from 'react-native-maps';

const { width, height } = Dimensions.get('window');

const ASPECT_RATIO = width / height;
const LATITUDE = 37.78825;
const LONGITUDE = -122.4324;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

class StaticMap extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      region: {
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
      },
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <ScrollView
          style={StyleSheet.absoluteFill}
          contentContainerStyle={styles.scrollview}
        >
          <Text>Clicking</Text>
          <Text>and</Text>
          <Text>dragging</Text>
          <Text>the</Text>
          <Text>map</Text>
          <Text>will</Text>
          <Text>cause</Text>
          <Text>the</Text>
          <MapView
            provider={this.props.provider}
            style={styles.map}
            scrollEnabled={false}
            zoomEnabled={false}
            pitchEnabled={false}
            rotateEnabled={false}
            initialRegion={this.state.region}
          >
            <Marker
              title="This is a title"
              description="This is a description"
              coordinate={this.state.region}
            />
          </MapView>
          <Text>parent</Text>
          <Text>ScrollView</Text>
          <Text>to</Text>
          <Text>scroll.</Text>
          <Text>When</Text>
          <Text>using</Text>
          <Text>a Google</Text>
          <Text>Map</Text>
          <Text>this only</Text>
          <Text>works</Text>
          <Text>if you</Text>
          <Text>disable:</Text>
          <Text>scroll,</Text>
          <Text>zoom,</Text>
          <Text>pitch,</Text>
          <Text>rotate.</Text>
          <Text>...</Text>
          <Text>It</Text>
          <Text>would</Text>
          <Text>be</Text>
          <Text>nice</Text>
          <Text>to</Text>
          <Text>have</Text>
          <Text>an</Text>
          <Text>option</Text>
          <Text>that</Text>
          <Text>still</Text>
          <Text>allows</Text>
          <Text>zooming.</Text>
        </ScrollView>
      </View>
    );
  }
}

StaticMap.propTypes = {
  provider: ProviderPropType,
};

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  scrollview: {
    alignItems: 'center',
    paddingVertical: 40,
  },
  map: {
    width: 250,
    height: 250,
  },
});

export default StaticMap;