Saltar al contenido principal
@capgo/capacitor-compass Ubicación De código abierto

Brújula Complemento Capacitor

Lea la dirección magnética del dispositivo en grados con actualizaciones continuas y manejo de permisos

Instalar

bun add @capgo/capacitor-compass bunx cap sync
npm, pnpm o yarn
  • npm install @capgo/capacitor-compass
  • pnpm add @capgo/capacitor-compass
  • yarn add @capgo/capacitor-compass

Guía

Cómo usar Compass en Capacitor

Probar en dispositivo

Descargue la aplicación Capgo, luego escane el código QR code.

Vista previa del complemento de brújula QR code

Usando @capgo/capacitor-brújula

Interfaz del complemento de brújula Capacitor para leer la dirección de la brújula del dispositivo.

Instalar

bun add @capgo/capacitor-compass
bunx cap sync

bunx cap sync copiar el plugin nativo code en tus proyectos nativos. Ejecútalo de nuevo después de cada actualización del plugin.

Importar

import { CapgoCompass } from '@capgo/capacitor-compass';

API a un vistazo

Método Descripción
getCurrentHeading Obtener la dirección actual del compás en grados. En iOS, la dirección se actualiza en segundo plano y se devuelve el valor más reciente. En Android, la dirección se calcula cuando se llama al método utilizando sensores de acelerómetro y magnetómetro. No implementado en Web.
startListening Comience a escuchar cambios en la dirección del compás mediante eventos. Esto inicia los sensores del compás y emite eventos de 'headingChange'.
stopListening Detener la escucha de cambios en la dirección del compás. Esto detiene los sensores del compás y deja de emitir eventos.
checkPermissions Verificar el estado actual de permiso para acceder a datos del compás. En iOS, esto verifica el estado de permiso de ubicación. En Android, esto siempre devuelve 'granted' ya que no se requieren permisos.
requestPermissions Solicitar permiso para acceder a datos del compás. En iOS, esto solicita permiso de ubicación (requerido para datos de dirección). En Android, esto resuelve inmediatamente ya que no se requieren permisos.
watchAccuracy Comience a monitorear la precisión del compás. En Android, esto monitorea la precisión del magnetómetro y emite eventos de cambio de precisión. Los desarrolladores pueden escuchar estos eventos y implementar su propia interfaz de usuario para solicitudes de calibración. En iOS y Web, este método no hace nada ya que la monitoreo de precisión del compás no está disponible.
unwatchAccuracy Detener la monitorización de precisión del compás.
getAccuracy Obtenga el nivel actual de precisión del compás. En Android, devuelve la precisión actual del sensor de magnetómetro. En iOS y Web, siempre devuelve CompassAccuracy.UNKNOWN ya que la monitorización de precisión no está disponible.

Ejemplos

getCurrentHeading()

Obtenga el valor actual del compás en grados. En iOS, el valor se actualiza en segundo plano y se devuelve el último valor. En Android, el valor se calcula cuando se llama al método utilizando sensores de acelerómetro y magnetómetro. No implementado en Web.

import { CapgoCompass } from '@capgo/capacitor-compass';

const { value } = await CapgoCompass.getCurrentHeading();
console.log('Compass heading:', value, 'degrees');

startListening()

Comience a escuchar cambios en el valor del compás mediante eventos. Esto inicia los sensores del compás y emite eventos de 'headingChange'.

import { CapgoCompass } from '@capgo/capacitor-compass';

// With default throttling (100ms interval, 2° minimum change)
await CapgoCompass.startListening();

// With custom throttling for high-frequency updates
await CapgoCompass.startListening({
  minInterval: 50,      // 50ms between events
  minHeadingChange: 1.0 // 1° minimum change
});

CapgoCompass.addListener('headingChange', (event) => {
  console.log('Heading:', event.value);
});

stopListening()

Detener la escucha de cambios en la dirección del compás. Esto detiene los sensores del compás y deja de emitir eventos.

import { CapgoCompass } from '@capgo/capacitor-compass';

await CapgoCompass.stopListening();

checkPermissions()

Verifique el estado actual de permiso para acceder a datos del compás. En iOS, esto verifica el estado de permiso de ubicación. En Android, esto siempre devuelve 'granted' ya que no se requieren permisos.

import { CapgoCompass } from '@capgo/capacitor-compass';

const status = await CapgoCompass.checkPermissions();
console.log('Compass permission:', status.compass);

requestPermissions()

Solicite permiso para acceder a datos del compás. En iOS, esto solicita permiso de ubicación (requerido para datos de dirección). En Android, esto resuelve inmediatamente ya que no se requieren permisos.

import { CapgoCompass } from '@capgo/capacitor-compass';

const status = await CapgoCompass.requestPermissions();
if (status.compass === 'granted') {
  // Can now use compass
}

watchAccuracy()

Comience a monitorear la precisión del compás. En Android, esto monitorea la precisión del sensor de magnetómetro y emite eventos de accuracyChange. Los desarrolladores pueden escuchar estos eventos y implementar su propia interfaz de usuario para solicitudes de calibración. En iOS y Web, este método no hace nada ya que la monitorización de precisión del compás no está disponible.

import { CapgoCompass, CompassAccuracy } from '@capgo/capacitor-compass';

// Start monitoring accuracy
await CapgoCompass.watchAccuracy();

// Listen for accuracy changes and implement custom UI
CapgoCompass.addListener('accuracyChange', (event) => {
  console.log('Accuracy changed to:', event.accuracy);
  if (event.accuracy < CompassAccuracy.MEDIUM) {
    // Show your custom calibration UI
  }
});

The tabla above lists the 8 core methods. Listener and version helpers, and the full contract of each method, are documented in the repositorio de GitHub.

Escucha eventos

addListener devuelve un manejador. Llama handle.remove() cuando la pantalla se desmonta, o CapgoCompass.removeAllListeners() para eliminar cada oyente.

Referencia completa

Sigue adelante desde Usando @capgo/capacitor-compass

Si estás utilizando Usando @capgo/capacitor-compass para planificar la consola y las operaciones de API, conectarlo con @capgo/capacitor-compass para los detalles de implementación en @capgo/capacitor-compass Getting Started para los detalles de implementación en Inicio Resumen de API para los detalles de implementación en Resumen de API Introducción para los detalles de implementación en Introducción, y Claves de API para los detalles de implementación en Claves de API

FAQ

Preguntas frecuentes del plugin Compass

¿Cómo instalo el plugin Compass en una aplicación Capacitor?

Ejecuta &quot;bun add @capgo/capacitor-compass&quot; (o &quot;npm install @capgo/capacitor-compass&quot;), luego ejecuta &quot;bunx cap sync&quot; para que los proyectos iOS y Android capturen el nativo code. Importa desde &quot;@capgo/capacitor-compass&quot; en tu aplicación code.

¿Funciona @capgo/capacitor-compass con React, Vue y Angular?

Sí. Compass es un paquete Capacitor, por lo que funciona con cualquier framework web que se ejecute dentro de Capacitor, incluyendo Ionic, React, Vue, Angular, Svelte y JavaScript puro.

¿Qué versión de Capacitor soporta @capgo/capacitor-compass?

Capgo plugins siguen la versión mayor de Capacitor: utiliza la versión mayor del plugin que coincida con la versión mayor de Capacitor (por ejemplo, plugin v8 con Capacitor 8). La tabla de compatibilidad en el README del GitHub lista las versiones mantenidas.

¿Es gratuita y de código abierto @capgo/capacitor-compass?

Sí. El código fuente code está público en GitHub en https://github.com/Cap-go/capacitor-compass/ y el paquete es gratuito para instalar desde npm. Se aceptan informes de errores y solicitudes de cambios.

¿Puedo actualizar code que utiliza Compass sin una revisión de la Tienda?

Instalar o actualizar el plugin cambia el nativo code, por lo que necesita una nueva construcción de la tienda. Después de eso, los cambios de JavaScript, HTML y CSS que llaman al plugin pueden enviar directamente con Capgo actualizaciones en vivo.

Envía cambios de Compass sin esperar la revisión de la aplicación

Una vez que el plugin esté en tu tienda de construcción, Capgo actualizaciones en vivo envían los cambios de JavaScript, HTML y CSS a los usuarios en minutos.

Comienza con Capgo