cemaden-educacao
/
WPD-MobileApp
2
1
Fork 1
Code Issues 2 Pull Requests Projects Releases Wiki Activity
Browse Source

Fixing frozen map in MapForm that occours in IOS.

master
GabrielTrettel 4 years ago
parent
39493b21d3
commit
ef32644bd5
1 changed files with 111 additions and 112 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 223
      src/app/screens/MapFormScreen.js

223
src/app/screens/MapFormScreen.js
View File

@ -13,127 +13,126 @@ import { CurrentLocationContext } from "../context/CurrentLocationContext";
// NOTE: Implementação posterior: É interessante adcionar um searchBox para que o usuário busque um endereço (google places autocomplete é uma api paga) // NOTE: 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 MapFormScreen = (props) => {
const context = useContext(EventLocationContext); //local do evento
const contextLocation = useContext(CurrentLocationContext); //local do usuário
const context = useContext(EventLocationContext); //local do evento
const contextLocation = useContext(CurrentLocationContext); //local do usuário
const [marker, setMarker] = useState(context.eventCoordinates);
const [marker, setMarker] = useState(context.eventCoordinates);
const getAddress = async (coordenadas) => {
Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc");
const getAddress = async (coordenadas) => {
Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc");
const address = await Location.reverseGeocodeAsync(coordenadas);
if (address[0] != undefined) {
context.saveNewLocation(
address[0].street +
", " +
address[0].name +
"\n" +
address[0].district,
coordenadas
);
} else {
//Quando o usuário não da permissão de acesso da localização o geoCode retorna um array vazio
context.saveNewLocation("Erro ao carregar endereço", coordenadas);
}
};
const address = await Location.reverseGeocodeAsync(coordenadas);
if (address[0] != undefined) {
context.saveNewLocation(
address[0].street + ", " + address[0].name + "\n" + address[0].district,
coordenadas
);
} else {
//Quando o usuário não da permissão de acesso da localização o geoCode retorna um array vazio
context.saveNewLocation("Erro ao carregar endereço", coordenadas);
}
};
const setLocation = () => {
getAddress(marker);
props.navigation.goBack(null);
};
const setLocation = () => {
getAddress(marker);
props.navigation.goBack(null);
};
const map_scale = 0.003;
const lat_long_delta = {
latitudeDelta: map_scale,
longitudeDelta: map_scale * (screen_width / screen_height),
};
const map_scale = 0.003;
const lat_long_delta = {
latitudeDelta: map_scale,
longitudeDelta: map_scale * (screen_width / screen_height),
};
return (
<View style={styles.container}>
<MapView
style={styles.mapStyle}
showsUserLocation={true}
initialRegion={{
latitude: -23.533773,
longitude: -46.62529,
...lat_long_delta,
}}
region={{
latitude: marker.latitude,
longitude: marker.longitude,
...lat_long_delta,
}}
onRegionChangeComplete={(r) => {
console.log(r);
setMarker({ latitude: r.latitude, longitude: r.longitude });
}}
></MapView>
<View style={styles.markerFixed}>
<Image
style={styles.marker}
resizeMode="contain"
source={require("../assets/map-marker.png")}
/>
</View>
<View
style={{
flexDirection: "column",
flex: 1,
justifyContent: "flex-end",
padding: 10,
}}
>
<TouchableOpacity onPress={() => setLocation()}>
<View style={styles.button}>
<Text style={styles.text}>Confirmar</Text>
</View>
</TouchableOpacity>
</View>
</View>
);
const default_location = {
latitude: -12.901799,
longitude: -51.692116,
latitudeDelta: 70,
longitudeDelta: 70 * (screen_width / screen_height),
};
return (
<View style={styles.container}>
<MapView
style={styles.mapStyle}
showsUserLocation={true}
initialRegion={{ ...default_location }}
region={{
latitude: marker.latitude,
longitude: marker.longitude,
...lat_long_delta,
}}
onRegionChangeComplete={(r) => {
console.log(r);
setMarker({ latitude: r.latitude, longitude: r.longitude });
}}
/>
<View style={styles.markerFixed}>
<Image
style={styles.marker}
resizeMode="contain"
source={require("../assets/map-marker.png")}
/>
</View>
<View style={styles.submit_btn}>
<TouchableOpacity onPress={() => setLocation()}>
<View style={styles.button}>
<Text style={styles.text}>Confirmar</Text>
</View>
</TouchableOpacity>
</View>
</View>
);
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: {
backgroundColor: colors.black,
flex: 1,
},
mapStyle: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
},
button: {
backgroundColor: "#1976D2",
borderRadius: 20,
justifyContent: "center",
alignItems: "center",
width: "100%",
height: 42,
marginVertical: 10,
textAlign: "center",
},
markerFixed: {
left: "50%",
marginLeft: -24,
marginTop: -48,
position: "absolute",
top: "50%",
height: 48,
width: 48,
},
text: {
color: colors.white,
fontSize: 16,
textTransform: "uppercase",
fontWeight: "bold",
},
marker: {
height: 48,
width: 48,
},
submit_btn: {
position: "absolute",
bottom: 0,
width: "100%",
padding: 20,
},
container: {
backgroundColor: colors.black,
flex: 1,
},
mapStyle: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
},
button: {
backgroundColor: "#1976D2",
borderRadius: 20,
justifyContent: "center",
alignItems: "center",
width: "100%",
height: 42,
marginVertical: 10,
textAlign: "center",
},
markerFixed: {
left: "50%",
marginLeft: -24,
marginTop: -48,
position: "absolute",
top: "50%",
height: 48,
width: 48,
},
text: {
color: colors.white,
fontSize: 16,
textTransform: "uppercase",
fontWeight: "bold",
},
marker: {
height: 48,
width: 48,
},
}); });
export default MapFormScreen; export default MapFormScreen;
Write Preview
Loading…
Cancel
Save