MapConductorApple MapKit einrichten
So verwenden Sie Apple MapKit JS im Web mit MapConductor. Im Gegensatz zur iOS-Version ist ein von Apple ausgestelltes JWT-Token erforderlich.
Bevor Sie beginnen
MapKit JS-Token bereitstellen
Erstellen Sie die Maps ID und den privaten Schlüssel bei Apple Developer, signieren Sie das JWT serverseitig und geben Sie es aus. Da das Token ein Ablaufdatum hat, ist bei lange geöffneten Ansichten ein Mechanismus zur Aktualisierung erforderlich.
Installieren
MapKit JS lädt das Paket dynamisch aus dem Apple CDN. Es ist kein script-Tag erforderlich.
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-mapkitToken an State-Hook übergeben
Neben der Übergabe eines statischen Tokens können Sie auch einen Callback übergeben, der das Token bereitstellt und aktualisiert. Wenn beide angegeben werden, hat der Callback Vorrang.
const state = useMapKitViewState({
token: import.meta.env.VITE_MAPKIT_TOKEN ?? '',
mapDesignType: MapKitMapDesign.Standard,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});PRÜFEN
Was Sie sehen sollten
Wenn die MapKit-Karte angezeigt wird, sind Sie fertig.
import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { MapKitMapDesign, MapKitMapView, useMapKitViewState } from '@mapconductor/react-for-mapkit';
const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });
export function MapKitMap() {
const state = useMapKitViewState({
token: import.meta.env.VITE_MAPKIT_TOKEN ?? '',
mapDesignType: MapKitMapDesign.Standard,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});
const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));
return (
<MapKitMapView state={state} style={{ height: 480 }}>
<Marker state={markerState} />
</MapKitMapView>
);
}Kartendesigns
MapKitMapDesign entspricht den MapKit-Kartentypen.
Fehlerbehebung
Karte wird nicht angezeigt
- Überprüfen Sie, ob das Token keine leere Zeichenfolge ist.
- Überprüfen Sie, ob das Token nicht abgelaufen ist. Bei lange geöffneten Ansichten aktualisieren Sie es bitte über authorizationCallback.
Build mit React 18 nicht möglich
- Nur dieses Paket erfordert React 19 oder höher.
Beim Wechseln des Providers tritt ein Hook-Reihenfolgefehler auf
- React kann die Reihenfolge der Hook-Aufrufe nicht ändern. Erstellen Sie für jeden Provider eine kleine Komponente und rufen Sie darin die Hooks des Providers auf. Das providers/-Verzeichnis der Beispiel-App folgt dieser Struktur.
Weiter
Für den iOS-MapKit-Provider sind weder Schlüssel noch Initialisierung erforderlich. Derselbe Bildschirmcode kann plattformübergreifend verwendet werden.