You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.7 KiB
88 lines
2.7 KiB
import React, { useContext } from "react";
|
|
import { Button, StyleSheet, View, Text } from "react-native";
|
|
import MapView, { Marker } from "react-native-maps";
|
|
|
|
import colors from "../config/colors";
|
|
import { screen_width, screen_height } from "../config/dimensions";
|
|
|
|
import useLocation from "../hooks/useLocation";
|
|
import * as Location from 'expo-location';
|
|
import { EventLocationContext } from "../context/EventLocationContext";
|
|
|
|
|
|
//Implementação posterior: É interessante adcionar um searchBox para que o usuário busque um endereço (google places autocomplete é uma api paga)
|
|
|
|
const MapFormScreen = (props) => {
|
|
// const location = useLocation({
|
|
// latitude: -23.533773,
|
|
// longitude: -46.625290,
|
|
//});
|
|
const getAddress = async(coordenadas) => {
|
|
Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc");
|
|
|
|
const address = await Location.reverseGeocodeAsync(coordenadas.x);
|
|
// console.log(address);
|
|
context.saveNewLocation(address[0].street+", " + address[0].name +"\n" + address[0].district, coordenadas.x);
|
|
}
|
|
|
|
const context = useContext(EventLocationContext);
|
|
|
|
// console.log(markers);
|
|
const map_scale = 0.003;
|
|
const lat_long_delta = {
|
|
latitudeDelta: map_scale,
|
|
longitudeDelta: map_scale * (screen_width / screen_height),
|
|
};
|
|
|
|
//const local = useLocation();
|
|
//Deixei a localizção setada em sp só para fazer os testes
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<MapView
|
|
style={styles.mapStyle}
|
|
showsUserLocation={true}
|
|
initialRegion={{
|
|
latitude: -23.533773,
|
|
longitude: -46.625290,
|
|
...lat_long_delta,
|
|
}}
|
|
region={{
|
|
latitude: -23.533773,
|
|
longitude: -46.625290,
|
|
...lat_long_delta,
|
|
}}
|
|
>
|
|
<Marker
|
|
draggable={true}
|
|
coordinate={{
|
|
latitude: -23.533773,
|
|
longitude: -46.625290,
|
|
}}
|
|
onDragEnd={(e) =>
|
|
getAddress({ x: e.nativeEvent.coordinate })
|
|
}
|
|
></Marker>
|
|
</MapView>
|
|
|
|
<Button title="Confirmar" onPress={() => props.navigation.goBack(null)} />
|
|
<Text>{context.eventLocation.toString()}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
backgroundColor: colors.black,
|
|
flex: 1,
|
|
},
|
|
mapStyle: {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
},
|
|
});
|
|
|
|
export default MapFormScreen;
|