Agora, agora, também quero exibir uma pequena visualização do mapa aqui, e há diferentes maneiras de fazer
isso, é claro. Depois, adicionaremos um mapa interativo a esse aplicativo.
Por enquanto, eu só quero ter uma
imagem estática, assim como um instantâneo de mapa e o interessante é que o Google tem uma API para nós que gera esses instantâneos.
Você pode pesquisar na API estática do Google Maps no Google Maps para encontrar a documentação oficial, onde você pode
aprender tudo sobre isso,
é claro e no final, usar essa API é super direta.
Você só precisa enviar a solicitação para este URL e isso já lhe retorna uma imagem. Assim, você
pode usar este link em um componente de imagem e estará bem.
A única coisa complicada aqui é essa chave da API, você precisa de suas credenciais da API e, para
isso, precisa de uma chave da API.
Agora, basta clicar na chave da API aqui e gerar uma. Agora você pode selecionar um projeto
que já possui ou criar um novo projeto. Para isso,
é necessário cancelar aqui e, em vez disso, rolar um pouco mais para este Para
começar, ative a parte da API aqui e clique em Começar aqui.
Agora que você faz isso, é direcionado ao console da plataforma Google Maps, onde
agora pode ativar os diferentes recursos do Google Maps que deseja usar. Aqui, estou interessado em
mapas que mais tarde nos ajudarão a usar esse aplicativo dinâmico interativo em Android e eu estou interessado em lugares.
Portanto, essas duas coisas devem ser
verificadas, não precisamos das rotas porque não estamos construindo nenhum recurso de navegação aqui e, com
isso, podemos clicar em continuar, selecionar um projeto e agora selecionar um projeto existente
ou simplesmente criar um novo um e criarei um novo aqui e nomeie-o React Complete Guide, mas
você pode nomear o
que quiser, clique em Avançar aqui e aguarde a geração.
Isso deve ser relativamente rápido e agora estamos preocupados com os preços enquanto
isso está sendo carregado.
Geralmente, você pode usar isso de graça, mas precisa de uma conta de cobrança e é
isso que estou sendo solicitado aqui.
Você precisa de uma conta
do Google, é claro, e nesta conta do Google, você precisa de um cartão de
crédito para usá-lo, caso contrário, você não pode usá-lo, infelizmente, é o que é.
Então, você precisa de um cartão
de crédito, de uma conta de faturamento configurada em sua conta do Google e, em seguida, pode usar essa
conta do Google conectada para este projeto, que é o que estou fazendo aqui. Com isso ativado, você ainda poderá usá-lo gratuitamente,
terá um nível gratuito muito
generoso e anexará um link para os preços da plataforma Google Maps e
somente se você violar certos limites pelos quais não violaremos o pouco uso que temos
aqui nesses vídeos, somente se você violar esses limites, pagaria.
Agora, esteja ciente de que pode haver um ponto em que você precisa pagar
e que depende de quanto você usa a API e, portanto, verifique definitivamente os documentos de preços.
Agora aqui, eu tenho tudo isso ativado agora e estou terminando tudo e,
no final, você deve receber uma chave de API que, obviamente, eu invalidarei após essas gravações.
Portanto, você não pode usar o meu, mas deve usar
o seu e agora essa é a chave da API que você precisa inserir aqui neste URL.
Então agora eu vou copiar toda essa URL aqui e passar para o nosso código e lá, agora
quero exibir uma imagem aqui que aponte para essa URL porque, como mencionei, é assim
que você pode obter essa imagem, essa URL retorna uma imagem.
Agora, o que farei, portanto, é criar um novo componente aqui, denominado MapPreview. js porque também o utilizarei em
outro local do aplicativo posteriormente, onde importo o React do React e, em
seguida, importo a imagem e a folha de estilo do React Native, dessa forma.
Então, aqui, criarei meu componente de visualização de mapa, que recebe adereços, sem surpresa, que precisa retornar alguns jsx mais
tarde e configurar alguns estilos aqui no Stylesheet. crie e, claro,
também exporte esse componente de visualização do mapa.
Agora, aqui, quero gerar esse URL sobre o qual acabei de falar, portanto, aqui,
o URL de visualização da imagem deve ser gerado e isso pode ser feito usando as marcações de retorno aqui para que eu possa adicionar conteúdo dinâmico ao texto
facilmente e depois copiar em o URL que você acabou de copiar da documentação aqui, verifique se está
tudo em uma linha,
porque, por padrão, não está; por isso, verifique se está tudo
em uma linha, caso contrário isso não funcionará
e agora é claro que há
alguns segmentos que você precisa substitua,
por exemplo, aqui, o centro é igual a parte. Por padrão, isso aponta para a Ponte do Brooklyn
e você pode inserir endereços aqui, mas também pode inserir pares de latitude e longitude aqui.
Então, o que vou fazer aqui é adicionar dinamicamente duas informações aqui separadas por vírgula e a primeira coisa
é a latitude. Aqui, espero obter
isso nos meus adereços, espero obter um
adereço de localização e, claro, esse pode ser qualquer nome de adereço de sua
escolha, que deve ter uma chave lat e aqui, quero ter uma chave longa, uma chave lng também, para que seja a
latitude
e longitude do local que eu quero visualizar. Agora, o fator de zoom, definirei como
14, você pode experimentar diferentes fatores, isso influencia basicamente a distância ou o zoom do mapa.
Você também pode brincar com seu tamanho aqui.
Agora, como terei um contêiner de visualização de mapa que normalmente usarei com uma
altura de 200, configurarei a altura para 200 aqui e, portanto, configurarei a largura para 400 aqui.
Obviamente, você pode usar um tamanho maior aqui do que o contêiner para exibir a imagem posteriormente, mas lembre-se de
que, se estiver buscando uma imagem super grande aqui, é claro que haverá dados muito grandes e
demais para baixar, ele carregará mais lentamente e talvez você não precise disso.
Portanto, você deve apontar para um tamanho da imagem do mapa aqui, que se encaixa no container onde você deseja
exibi-lo, não precisa ter exatamente o mesmo tamanho, mas aproximadamente. Agora, o tipo de mapa é como o mapa deve ser exibido.
Você pode usar o satélite aqui, mas seguirei o roteiro padrão e agora você também pode adicionar marcadores a
esse mapa.
Agora, existem alguns marcadores configurados neste trecho simulado,
eu me livrarei de todos, exceto um, para que eu tenha apenas marcadores aqui, cor vermelha, um rótulo de,
este pode
ser um caractere aqui, como
ABC e então a latitude e longitude onde esse marcador deve ser colocado e, claro, isso
é novamente adereços. localização. lat e, em seguida,
aqui uma vírgula e, em seguida, substitua esse número por adereços. localização. lng.
A colocação desse marcador é opcional, mas é claro que quero mostrar ao usuário onde ele está.
Agora eu preciso da chave da API, então copiarei essa chave que foi gerada aqui e substituí-la aqui.
Agora não posso colá-lo dessa maneira, mas, na verdade, quero gerenciar isso em um arquivo separado,
porque também usarei essa chave de API em outros locais do aplicativo.
Então, aqui, eu vou criar um novo arquivo com o nome env. js para o ambiente configurar algumas
variáveis de ambiente e lá eu configurarei um objeto com minha chave da API do Google e esse deve ser esse valor
aqui e depois posso exportar isso e, é claro, portanto, que deve ter um nome, vars é igual a então eu exporto
vars aqui.
Então, com isso, eu posso simplesmente importar desse arquivo env e
é exatamente o que farei aqui, importar env do arquivo env aqui e isso significa apenas variáveis de ambiente como eu disse e agora injeta dinamicamente
aqui.
Portanto, agora temos um lugar onde podemos alterar essa chave e onde também podemos importá-la de todos
os lugares diferentes do nosso aplicativo.
Então aqui vou injetar dinamicamente env. googleapikey.
Então, com isso, configurei o URL de visualização
da imagem, agora neste componente, é claro que precisamos retornar a visualização da imagem e essa geralmente
é a visão que tenho aqui no seletor de local. Então, eu vou pegá-lo de lá e adicioná-lo na visualização do
mapa, assim, embora o conteúdo de fallback esteja lá, na verdade
eu quero passar isso de fora, então eu vou cortar isso de novo e mover isso de volta para o seletor de
localização.
No entanto, não assim, mas
sim aqui, importe este componente de visualização de mapa recém-adicionado, então importe-o de. / MapPreview, portanto, neste novo componente em que
estamos trabalhando, adicione-o aqui, visualize
o mapa e
faça essa verificação para essa busca e o indicador e o texto de fallback aqui.
Portanto, na visualização do mapa, portanto, terei apenas filhos auxiliares aqui para exibir o que é adicionado entre a tag de abertura
e fechamento, mas isso é apenas conteúdo de fallback, é claro
que me importo em exibir a visualização real aqui. Agora, precisamos garantir que o URL de visualização da
imagem também possa estar vazio, caso ainda não tenha sido escolhido um local. Por isso, criarei um URL de
visualização da imagem variável e apenas
atribui um valor aqui e quero atribuir um valor. se adereços. o local está definido porque isso também não pode ser definido,
caso ainda não tenhamos escolhido um local e agora o URL de visualização da imagem esteja vazio ou seja esse URL, dependendo
se temos um local transmitido no suporte de localização e agora podemos usá-lo lá embaixo para produzir algo e, a propósito,
desde que
eu estou usando o view aqui, é claro que também devemos nos
certificar de importar o view.
Agora, como uso esse URL?
Bem, se a tivermos, quero usá-la para gerar uma
imagem, caso contrário, mostrarei isso para adotar o conteúdo de fallback de crianças.
Então aqui podemos verificar
adereços. local, se estiver
definido, sei que também terei um
URL de imagem, é claro que também poderíamos apenas verificar a existência do URL da imagem e, se estiver definido,
exibirei
uma imagem aqui, se não estiver definido, output adota crianças assim, então eu mostrarei meu conteúdo de fallback.
Agora, a imagem aqui receberá um estilo, uma imagem de
mapa e uma fonte, e a fonte aqui usará um URI que aponta para o URL de visualização da imagem, porque será um URL de
rede, uma imagem de rede, certo?
Então agora vamos trazer os estilos do seletor de
localização, posso fazer uma visualização do mapa, mas só quero trazer a parte do conteúdo justificado e, na verdade, passar o resto manualmente aqui
e mesclá-lo, para que eu ainda passe pelos estilos . MapPreview de dentro do meu seletor de localização e na visualização do mapa,
agora quero mesclar isso com meus estilos que estou configurando aqui. Então, aqui, na verdade, envolvo isso em um objeto
em que puxo todos os estilos configurados na visualização de mapa aqui e mesclo em todos os estilos
configurados nesse suporte de estilo, para que possamos definir estilos de fora também e mesclá-los com nossos estilos
internos e agora os estilos internos na visualização do mapa, como acabei de dizer, terei justificado o conteúdo e alinhado os itens aqui e
para a própria imagem. Portanto, para
a imagem do mapa,
quero definir isso para que toda a largura e altura disponíveis que ele pode obter e precisamos definir isso
porque é uma imagem de rede. Como você aprendeu, para aqueles que você precisa definir a largura
e a altura do componente da imagem.
Agora, com isso, temos o componente de visualização do mapa que exibe essa imagem do mapa ou
nosso conteúdo de fallback que é
transmitido de fora e o faz verificando a localização prop.
Portanto, no local em que usamos o componente de visualização do mapa,
que obviamente é o seletor de localização, precisamos passar nesse
local e no local, se verificarmos a visualização do mapa, no final, será um objeto com latitude longitude ou
uma chave lat e lng. Portanto, de volta ao selecionador de
local, quero passar esse suporte aqui e, de fato, é exatamente isso que gerenciamos aqui com
o local de escolha, o que obviamente não é coincidência. Esse é um objeto com latitude e longitude ou é indefinido inicialmente e
também lidamos com esse caso no componente de visualização de
mapa; se não for definido, apenas mostramos o conteúdo de fallback que é passado de fora.
Assim, para o local, podemos simplesmente passar o local escolhido e, com isso, agora devemos ter uma
configuração em que possamos realmente visualizar o local.
Agora, aqui, vemos o conteúdo de fallback,
mas se eu clicar em obter a localização do usuário, vemos o botão giratório e, em seguida, vemos um instantâneo real do local
que escolhemos.
Como mencionei, não é aqui que estou sentado agora, este é
apenas um lugar fictício que o emulador nos fornece. O mesmo no Android, se
eu escolher um local aqui, agora essa
é a sede do Google que eu selecionei por padrão lá.
Portanto, isso funciona, agora como próximo passo, quero ter certeza de
que também podemos escolher esse lugar no mapa em vez de apenas nos localizar.