[REACT-NATIVE] Por que os Markers nem sempre aparecem no MapView?

24/10/2022

0

Existem 4 parceiros cadastrados no banco de dados. Cada parceiro tem um endereço, no modelo "Rua Santo Antonio, 182". Esses endereços são convertidos em coordenadas no hook useCoordinates. Mas os marcadores nem sempre são carregados no mapa. Procurei uma solução, mas difícil encontrar alguém que tenha feito o mesmo em react-native > 0,69

/src/page/mapa/index.js

import { useState, useEffect } from 'react';
import { View, PermissionsAndroid, Image } from 'react-native';
import BarraPesquisa from '../../components/BarraPesquisa';
import MapView, { Marker } from 'react-native-maps';
import Geolocation from "react-native-geolocation-service";
import useCoordenadas from '../../hooks/useCoordenadas';
import { useNavigation } from '@react-navigation/native';
import markerIcon from '../../assets/images/marker.png';
import { estilos } from './estilos';

export default function Mapa() {

  const {coordenadas, carregaCoordenadas} = useCoordenadas();
  const [localizacaoAtual, setLocalizacaoAtual] = useState({});
  const [permiteGPS, setPermiteGPS] = useState(false);
  const [mapReady, setMapReady] = useState(false);
  const navigation = useNavigation();

  
  const geolocation = Geolocation;
  
  const requestLocationPermission = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
        {
          title: 'Geolocation Permission',
          message: 'Can we access your location?',
          buttonNeutral: 'Ask Me Later',
          buttonNegative: 'Cancel',
          buttonPositive: 'OK',
        },
      );
      if (granted === 'granted') {
        console.log('Permissão para acesso à geolocalização concedida')
        setPermiteGPS(true);
        return true;
      } else {
        console.log('Permissão para acesso à geolocalização não concedida');
        return false;
      }
    } catch (err) {
      return false;
    }
  };

  useEffect( () => {

    carregaCoordenadas();
    requestLocationPermission();

}, [])

  useEffect( () => {

    permiteGPS && geolocation.getCurrentPosition(
      position => {
        setLocalizacaoAtual({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          coordinates: {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude
          }
        });
      },
      error => {
        console.log(error.message.toString());
      },
      {
        showLocationDialog: true,
        enableHighAccuracy: true,
        timeout: 20000,
        maximumAge: 0
      }
    );
  
}, [permiteGPS])

useEffect(() => {

},[coordenadas])

  return (
      <View>
          <BarraPesquisa style={estilos.searchSection} />
          { ( localizacaoAtual !== undefined &&  
              localizacaoAtual.hasOwnProperty('latitude') && 
              localizacaoAtual.hasOwnProperty('longitude')) && 
          <MapView 
            onMapReady={() => setTimeout(() => setMapReady(true), 10000)}
            loadingEnabled = 
            provider="google"
            style={estilos.map} 
            initialRegion={{
            latitude: localizacaoAtual.latitude,
            longitude: localizacaoAtual.longitude,
            latitudeDelta: 0.04,
            longitudeDelta: 0.05,
            }}
          >
              { coordenadas && coordenadas.map((coordenada, i) => {
                return (
                 
                    <Marker
                      key=
                      tracksViewChanges={!mapReady}
                      coordinate={{"latitude": coordenada.lat, "longitude": coordenada.lng}}
                      pinColor={"orange"} 
                      onPress={() => { 
                        navigation.navigate('ParceiroDetalhes', coordenada.detalhes) }}>
                      
                      <Image source= style={{height: 35, width: 35}}/>

                    </Marker>
                  
                )
              })
             }
          </MapView>
  }
      </View>
  )
}


/src/hooks/useCoordenadas.js

import { useState } from 'react';
import { listaParceiros } from '../services/requisicoes/parceiros';
import Geocode from "react-geocode";

export default function useCoordenadas() {

    const [ coordenadas, setCoordenadas ] = useState([]);

    const carregaCoordenadas = async () => { 

        const parceiros = await listaParceiros();
        let coordenadasArray = [];

        Geocode.setApiKey("MY_API_KEY");
        Geocode.setRegion("br");
        Geocode.setLanguage("cs");
        Geocode.enableDebug(true);

        Promise.all(
            parceiros.map((parceiro) => {

                Geocode.fromAddress(parceiro.Endereco).then(
                    (response) => {
                          const location = response.results[0].geometry.location;
                          if(location.hasOwnProperty('lat') && location.hasOwnProperty('lng')){
                            coordenadasArray.push({
                              detalhes: parceiro,
                              lat: location.lat,
                              lng: location.lng,
                            });
                          }
                    },
                    (error) => {
                      console.error(error);
                    }
                  )
        })).then(() => {
             
            setCoordenadas(coordenadasArray)
        }
        )
    }

    return { coordenadas, carregaCoordenadas };
Cesar Murilo

Cesar Murilo

Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar