MapConductorConfigurar Apple MapKit
Estos son los pasos para usar Apple MapKit JS en la web con MapConductor. A diferencia de la versión de iOS, se necesita un token JWT emitido por Apple.
Antes de empezar
Preparar el token de MapKit JS
Cree la ID de Maps y la clave privada en Apple Developer, firme el JWT en el servidor y emítalo. Como el token tiene una fecha de vencimiento, se requiere un mecanismo de actualización en pantallas que permanecen abiertas por mucho tiempo.
Instalar
MapKit JS carga el paquete dinámicamente desde el CDN de Apple. No es necesario escribir etiquetas script.
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-mapkitPasar el token al hook de estado
Además de pasar un token estático, puede pasar una devolución de llamada que suministre y actualice el token. Si se especifican ambos, la devolución de llamada tiene prioridad.
const state = useMapKitViewState({
token: import.meta.env.VITE_MAPKIT_TOKEN ?? '',
mapDesignType: MapKitMapDesign.Standard,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});VERIFICAR
Lo que deberías ver
Si aparece el mapa de MapKit, ha terminado.
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>
);
}Diseños de mapa
MapKitMapDesign corresponde a los tipos de mapa de MapKit.
Solución de problemas
El mapa no aparece
- Verifique que el token no sea una cadena vacía.
- Verifique que el token no haya caducado. En pantallas que permanecen abiertas por mucho tiempo, actualícelo mediante authorizationCallback.
No se puede compilar con React 18
- Solo este paquete requiere React 19 o superior.
Error de orden de hooks al cambiar de proveedor
- React no puede cambiar el orden de las llamadas a los hooks. Cree un componente pequeño para cada proveedor y llame a los hooks de ese proveedor dentro de él. El directorio providers/ de la aplicación de ejemplo tiene esta configuración.
Siguiente
El proveedor de MapKit para iOS no requiere clave ni inicialización. El mismo código de pantalla se puede usar por plataforma.