@capgo/capacitor-native-map

Google Maps auf Android, Apple MapKit auf iOS und Google Maps JS im Web – mit einem einzigen TypeScript API für Marker, Kamera und Overlays.

Loslegen GitHub

iOS (Apple MapKit)	Android (Google Maps)

Derselbe TypeScript-code läuft auf beiden Plattformen. Diese Aufnahmen stammen aus dem Beispiel-AppDemo-Tour, läuft auf einem echten iOS-Simulator und Android-Emulator. Der code für jeden Schritt ist im README-Demos.

Übersicht

@capgo/capacitor-native-map bietet dir einen einzigen TypeScript-API für native Map-Performance auf Mobile und Google Maps JS im Web. Erstelle eingebettete Karten in einem DOM-Container oder nutze Hintergrundmodus (toBack) um die Karte hinter einem transparenten WebView zu rendern und gebrandetes UI in HTML zu bauen.

Plattformunterstützung

Plattform	Support	Notizen
iOS	Ja	MapKit
Android	Ja	Google Maps
Web	Ja	Google Maps JS

Kernfunktionen

Lifecycle: create, destroy, show, hide, updateLayout, Resize-Synchronisation mit Ionic-Scroll-Views.
Hintergrundmodus: toBack Compositing mit Multi-Touch-Passthrough auf transparentem HTML.
Kamera: setCamera, fitBounds, getMapBounds, min/max Zoom, Bearing und Tilt.
Marker: hinzufügen, aktualisieren, entfernen, ziehen, Clustering und Event-Listener.
Overlays: Polygone, Polylinien, Kreise und Tile-Overlays (plattformabhängig).
Events: map-, marker-, shape-, cluster- und camera-idle/move-Callbacks.

Öffentliches API

Methode	Beschreibung
`create`	Karte erstellen (`CreateMapArgs`: `id`, `config`, optional `element`, `apiKey`, `toBack`, `forceCreate`).
`destroy`	Map-Instanz zerstören und native Ressourcen freigeben.
`show` / `hide`	Native Karte anzeigen oder ausblenden, ohne sie zu zerstören.
`updateLayout`	Position und Größe in CSS-Pixeln aktualisieren (besonders im `toBack` Modus).
`enableTouch` / `disableTouch`	Umschalten, ob die Karte Gesten empfängt.
`setCamera`	Kameraposition verschieben oder animieren.
`getMapType` / `setMapType`	Kartentyp lesen oder setzen (`Normal`, `Hybrid`, `Satellite`, `Terrain`, `None`).
`fitBounds`	Viewport an Breitengrad- und Längengradgrenzen anpassen, optional mit Padding.
`getMapBounds`	Aktuelle sichtbare Grenzen lesen.
`setPadding`	Padding für den sichtbaren Kartenbereich setzen.
`addMarker` / `addMarkers`	Einen oder mehrere Marker hinzufügen; gibt Marker-IDs zurück.
`removeMarker` / `removeMarkers`	Marker per ID entfernen.
`addPolygons` / `removePolygons`	Polygon-Overlays hinzufügen oder entfernen.
`addPolylines` / `removePolylines`	Polylinien hinzufügen oder entfernen.
`addCircles` / `removeCircles`	Kreise hinzufügen oder entfernen.
`addTileOverlay` / `removeTileOverlay`	Eigene Tile-Layer (Android und Web; iOS lehnt mit ab `UNAVAILABLE`).
`enableClustering` / `disableClustering`	Marker-Clustering mit optionaler Mindestclustergröße.
`enableCurrentLocation`	Standortpunkt des Nutzers anzeigen, wenn die Berechtigung es erlaubt.
`enableIndoorMaps` / `enableTrafficLayer`	Indoor-Karten und Verkehrslage umschalten (plattformabhängig).
`setOnMapClickListener`	Auf Taps auf der Kartenfläche lauschen.
`setOnMarkerClickListener`	Auf Marker-Taps lauschen.
`setOnCameraIdleListener` / `setOnCameraMoveStartedListener`	Kamera-Bewegungsevents.
`setOnClusterClickListener`	Cluster-Tap-Events.
`setOnPolygonClickListener` / `setOnCircleClickListener` / `setOnPolylineClickListener`	Shape-Tap-Events.
`setOnMarkerDragStartListener` / `setOnMarkerDragListener` / `setOnMarkerDragEndListener`	Marker-Drag-Events.

Source of Truth

Diese API-Referenz wird aus dem Plugin src/definitions.ts im capacitor-native-map Repository.

Weiterlesen mit @capgo/capacitor-native-map

Wenn du es nutzt @capgo/capacitor-native-map in deiner Capacitor-App, verbinde sie mit @capgo/capacitor-native-map verwenden für das SEO-Tutorial und die zugehörigen Capgo-Plugin-Dokumentationen.