Peta Nadi Plugin Capacitor

Menggunakan @capgo/capacitor-peta-nadi

Peta Google di Android, Peta Apple di iOS, dan Peta Google JS di web dengan satu TypeScript API untuk marker, kamera, bentuk, clustering, dan event.

Instal

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

Apa yang Dikembangkan oleh Plugin ini

• createPeta yang diintegrasikan ke dalam elemen DOM, atau toBack: true Peta di balik HTML yang transparan.
• updateLayoutPeta dapat diubah ukurannya dan diposisikan ulang (CSS piksel).
• setCamera / fitBoundsKontrol kamera dan viewport.
• addMarker / addMarkers / removeMarkerMarker dengan listener sentuh dan geser.
• enableClusteringGrup marker yang padat.
• enableCurrentLocationTanda lokasi pengguna ketika izin memungkinkannya.
• Peta lapisan: poligon, garis poligoni, lingkaran, dan lapisan tile (berbeda oleh platform).

Penggunaan Contoh

Peta yang diintegrasikan

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.

Peta latar belakang dengan UI 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,
});

Wrap bagian HUD dengan data-map-overlay (lihat panduan awal) jadi CSS overlay memungkinkan sentuhan; area transparan melewati gestur ke peta.

Referensi Lengkap

• GitHub: https://github.com/Cap-go/capacitor-peta-asli/
• Dokumen: /docs/plugins/native-map/