Geolocalização Móvel: Conectando Código ao Mundo Físico

npm install @capacitor/geolocation
npx cap sync android

<!-- android/app/src/main/AndroidManifest.xml -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Permissões para Leitura de Geolocalização (Coarse e Fine) -->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

    <application ...>
    </application>
</manifest>

import React, { useState } from 'react';
import { Geolocation } from '@capacitor/geolocation';

export default function App() {
  const [localizacao, setLocalizacao] = useState(null);
  const [carregando, setCarregando] = useState(false);
  const [mensagemErro, setMensagemErro] = useState('');

  // Função assíncrona para capturar coordenadas
  const capturarLocalizacao = async () => {
    setCarregando(true);
    setMensagemErro('');

    try {
      // Solicita permissão e busca a posição do dispositivo
      const position = await Geolocation.getCurrentPosition({
        enableHighAccuracy: true, // Força uso do GPS de alta precisão
        timeout: 10000,           // Limite de tempo (10 segundos)
        maximumAge: 3000          // Aceita cache de no máximo 3s
      });

      console.log('Posição capturada:', position);
      
      setLocalizacao({
        lat: position.coords.latitude,
        lng: position.coords.longitude,
        precisao: position.coords.accuracy
      });
    } catch (error) {
      console.error('Erro ao acessar GPS:', error);
      setMensagemErro('Não foi possível obter a localização. Verifique as permissões do GPS.');
    } finally {
      setCarregando(false);
    }
  };

  // URL dinâmica para abrir o ponto no Google Maps externo
  const mapUrl = localizacao 
    ? `https://www.google.com/maps/search/?api=1&query=${localizacao.lat},${localizacao.lng}`
    : '#';

  return (
    <div className="p-6 max-w-md mx-auto bg-white rounded-xl shadow-md border text-center space-y-4">
      <h2 className="text-xl font-bold text-gray-800">Rastreamento GPS Mobile</h2>

      <button 
        onClick={capturarLocalizacao}
        disabled={carregando}
        className="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded-lg shadow"
      >
        {carregando ? 'Buscando Satélite...' : '📍 Pegar Minha Localização'}
      </button>

      {mensagemErro && (
        <p className="text-red-600 text-sm font-semibold bg-red-50 p-2 rounded">
          {mensagemErro}
        </p>
      )}

      {localizacao && (
        <div className="p-4 bg-gray-50 rounded-lg text-left text-sm space-y-2 border">
          <p><strong>Latitude:</strong> {localizacao.lat}</p>
          <p><strong>Longitude:</strong> {localizacao.lng}</p>
          <p><strong>Precisão:</strong> {localizacao.precisao} metros</p>

          <a 
            href={mapUrl}
            target="_blank" 
            rel="noopener noreferrer"
            className="mt-3 block bg-slate-900 text-white text-center py-2 rounded-lg font-medium hover:bg-slate-800"
          >
            🗺️ Abrir no Google Maps
          </a>
        </div>
      )}
    </div>
  );
}