Mappa nativa Plugin Capacitor

Utilizza @capgo/capacitor-mappa-nativa

Il servizio di mappa di Google su Android, Apple MapKit su iOS e Google Maps JS sul web con un unico file TypeScript API per marker, camera, forme, clustering e eventi.

Installa

bun add @capgo/capacitor-native-map
bunx cap sync

Cos'è che questo plugin esporre

• create: mappa nativa in un elemento DOM, o toBack: true : mappa dietro un HTML trasparente.
• updateLayout: ridimensiona e riposiziona la mappa nativa (CSS pixel).
• setCamera / fitBounds: controllo della camera e della vista.
• addMarker / addMarkers / removeMarker: marker con listener di tocco e trascinamento.
• enableClustering: raggruppa set di marker densi.
• enableCurrentLocationPosiziona la tua ubicazione quando è consentito.
• Ombreggiature: poligoni, linee, cerchi e layer di piastrelle (varia a seconda della piattaforma).

Utilizzo di esempio

Mappa incorporata

import { NativeMap } from '@capgo/capacitor-native-map';

const map = await NativeMap.create({
  id: 'main-map',
  element: document.getElementById('map')!,
  apiKey: 'YOUR_GOOGLE_MAPS_API_KEY',
  config: {
    center: { lat: 37.7749, lng: -122.4194 },
    zoom: 12,
  },
});

map.setOnMapClickListener((e) => console.log(e.latitude, e.longitude));

// In a framework component, call `await map.destroy()` from your teardown/cleanup hook.

Mappa di sfondo con interfaccia utente HTML

const map = await NativeMap.create({
  id: 'stores-map',
  toBack: true,
  apiKey: 'YOUR_GOOGLE_MAPS_API_KEY',
  config: {
    center: { lat: 40.7128, lng: -74.006 },
    zoom: 11,
    x: 0,
    y: 0,
    width: window.innerWidth,
    height: window.innerHeight,
  },
});

await map.updateLayout({
  x: 0,
  y: 0,
  width: window.innerWidth,
  height: window.innerHeight,
});

Avvolgi sezioni HUD con data-map-overlay (vedere la guida introduttiva) quindi il CSS dell'overlay abilita i tocchi; le aree trasparenti passano i gesti alla mappa.

Riferimento Completo

• GitHub: https://github.com/Cap-go/capacitor-mappa-nativa/
• Documentazione: /docs/plugins/native-map/