60 lines
1.4 KiB
JavaScript
60 lines
1.4 KiB
JavaScript
import React from 'react';
|
|
import {StyleSheet, View, Text} from 'react-native';
|
|
import MapView, {PROVIDER_GOOGLE, Marker, Callout} from 'react-native-maps'; // remove PROVIDER_GOOGLE import if not using Google Maps
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
...StyleSheet.absoluteFillObject,
|
|
height: '100%',
|
|
width: '100%',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
map: {
|
|
...StyleSheet.absoluteFillObject,
|
|
height: '100%',
|
|
width: '100%',
|
|
},
|
|
});
|
|
|
|
const HouseLocation = () => {
|
|
const [marker, setMarker] = React.useState({
|
|
latitude: 37.78825,
|
|
longitude: -122.4324,
|
|
});
|
|
return (
|
|
<View style={styles.container}>
|
|
<MapView
|
|
provider={PROVIDER_GOOGLE} // remove if not using Google Maps
|
|
style={styles.map}
|
|
initialRegion={{
|
|
latitude: 37.78825,
|
|
longitude: -122.4324,
|
|
latitudeDelta: 0.015,
|
|
longitudeDelta: 0.0121,
|
|
}}>
|
|
<Marker
|
|
coordinate={marker}
|
|
draggable={true}
|
|
onDragEnd = {(e) => {
|
|
setMarker({
|
|
latitude: e.nativeEvent.coordinate.latitude,
|
|
longitude: e.nativeEvent.coordinate.longitude,
|
|
|
|
})
|
|
|
|
|
|
|
|
}}
|
|
>
|
|
<Callout>
|
|
<Text>{marker.latitude.toFixed(3)}, {marker.longitude.toFixed(3)}</Text>
|
|
|
|
|
|
</Callout>
|
|
</Marker>
|
|
</MapView>
|
|
</View>
|
|
);
|
|
};
|
|
export default HouseLocation;
|