Como podemos garantir que podemos escolher um lugar?
Bem, na visualização do mapa, na tela do mapa, você pode adicionar um manipulador onPress, e isso dispara sempre que você
toca em
algum lugar do mapa e, com isso, não quero dizer toques quando você rola, mas quando você
toca ali sem rolar, por isso, se realmente quer selecionar algo. Isso será acionado e, portanto, poderá ser vinculado a
uma função que eu defino aqui, que deve armazenar o local selecionado.
Então, aqui vou ter minha função de manipulador de localização de seleção, que obtém um objeto de evento e é a
isso que vinculo o onPress aqui.
Agora podemos analisar esse evento para ter uma ideia do que está lá dentro, que tipo de dados obtemos.
Então, deixe-me salvar
e testá-lo, vamos ao mapa e, depois de carregado, basta tocar em algum lugar no mapa, como aqui.
Se agora voltarmos, essa é a saída que eu recebo e lá você vê que é um objeto muito grande;
no final, temos um monte de dados lá dos quais não precisamos
realmente, é esse evento sintético aqui.
O que temos, o interessante é essa propriedade de evento nativo que é outro objeto, que possui uma
propriedade de coordenadas que é outro objeto, que possui latitude e longitude.
É nisso que estamos interessados no final, certo,
é isso que queremos descobrir, esse
é o par
de coordenadas que queremos obter.
Portanto, este é o local, as coordenadas em que o usuário
digitou, é o que eu quero armazenar aqui e seria bom começar adicionando um marcador nesse local para marcar
o local no mapa. Para isso, é
claro que podemos usar o estado para salvar o local selecionado e o componente, inicialize-o
aqui e tenha nosso local selecionado e defina o local
selecionado com a ajuda do estado de uso. Inicialmente está vazio, não temos um local selecionado inicialmente
e, em seguida, podemos
criar um marcador aqui, se tivermos um. Para isso, podemos importar o componente do marcador de mapas nativos
adicionando algumas importações nomeadas aqui, além da importação padrão que temos e podemos importar o marcador dos mapas do React Native, é
tão simples assim e podemos renderizar esse marcador adicionando-o entre os abrindo e fechando tags da visualização do mapa que
precisamos agora,
para que possamos adicionar um marcador aqui.
Agora, esse marcador precisa de alguma configuração, caso contrário, os
mapas do React Native não sabem onde mostrá-lo. Podemos adicionar um título, por
exemplo, o local escolhido, mas, mais importante, você pode adicionar um suporte de coordenadas
aqui e que espera obter um objeto com latitude e longitude lá. Então, aqui, adicionarei uma nova variável, coordenadas do marcador, digamos, e se eu tiver um local selecionado
e esse for o estado que estou gerenciando, se o tiver, quero definir as coordenadas do marcador iguais
a um objeto em que você precisa ter uma latitude denominada latitude; portanto,
não é
lat, ela precisa ser latitude, porque o componente marcador procurará uma propriedade
denominada latitude e que pode ser o local
selecionado. lat,
digamos, depende de nós como salvamos isso, não estamos fazendo agora, mas mais tarde salvarei
para que tenhamos um suporte lat e longitude que precise ser nomeado assim, que possa conter
o valor armazenado em selectedLocation. lng.
Agora, as coordenadas do marcador estão definidas condicionalmente e agora podemos verificar se as condições do marcador existem
e, se existir, usamos esse atalho para também gerar um marcador aqui. Agora, as coordenadas dos marcadores também são o que
podemos alimentar aqui e
observe que isso é coordenada, não coordenadas, é apenas coordenada.
Neste ponto, são nossas coordenadas de marcador e agora precisamos garantir que definimos o local selecionado e, é claro, eu
quero fazer isso
aqui no meu manipulador de local selecionado. Lá, eu quero chamar definir
local selecionado para definir meu estado, passar um objeto para lá e definir meu estado para um objeto com
uma chave lat, porque estou tentando extrair lat lá do evento. nativeEvent como você viu, e havia uma propriedade de coordenada que
tem uma propriedade de latitude e, em seguida, lng que eu também estou extraindo lá embaixo deve
ser definido como event. nativeEvent. coordenadas. longitude. E com esse código,
poderemos visualizar um marcador no mapa. Então, vamos tentar, vamos para o
iOS, carregar o mapa lá
e escolher algum
lugar e vemos um marcador no local em que clico. O mesmo no Android, espero, vamos tentar
lá, abrir o mapa e, de fato, lá se eu tocar em
algum lugar,
também coloco meu marcador lá.
É assim que podemos trabalhar com marcadores e como podemos selecionar
locais, tudo é legal.
Agora, finalmente, eu quero poder clicar em um botão salvar lá em cima que ainda
não existe, que fecha o mapa e passa o local selecionado de volta à minha nova tela de local no final, certo,
o que eu tenho aqui também. Quero voltar para a tela e, é claro, salvar meu
local selecionado.