Skjölun / Uppsetning / React / Apple MapKit

Uppsetning á Apple MapKit

Hvernig nota má Apple MapKit JS á vefnum gegnum MapConductor. Ólíkt iOS-þjónustuaðilanum þarf þessi JWT-teikn gefið út af Apple.

PACKAGE

react-for-mapkit

API KEY

JWT-teikn

CSS

Enginn

REACT

19 eða nýrra

Sami þjónustuaðili, aðrir vettvangariOS

Skoða sýnidæmiVerslanakort · React ↗

Áður en þú byrjar

Node.js 18 eða nýrra, React 19 eða nýrra

Apple Developer-aðgangur með Maps ID og einkalykli fyrir MapKit JS

STEP 01

Útbúðu MapKit JS-teikn

Búðu til Maps ID og einkalykil í Apple Developer, og undirritaðu svo JWT á þjóninum þínum. Teikn renna út, svo skjáir sem standa lengi opnir þurfa leið til endurnýjunar.

VARÚÐ

Sendu einkalykilinn aldrei í vafrann — undirritaðu JWT-ið á þjóninum.

STEP 02

Settu upp

Pakkinn hleður MapKit JS kvikt frá CDN Apple — ekkert script-tag að skrifa.

terminalnpm

npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
            @mapconductor/react-for-mapkit

STEP 03

Sendu teiknið til stöðu-hooksins

Sendu fast teikn, eða afturkall sem útvegar og endurnýjar það. Séu bæði gefin vinnur afturkallið.

MapKitMap.tsxTypeScript · React

const state = useMapKitViewState({
  token: import.meta.env.VITE_MAPKIT_TOKEN ?? '',
  mapDesignType: MapKitMapDesign.Standard,
  cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});

STAÐFESTA

Það sem þú ættir að sjá

Uppsetningunni er lokið þegar MapKit-kortið teiknast.

MapKitMap.tsxTypeScript · React

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>
  );
}

Kortahönnun

MapKitMapDesign varpast á kortategundir MapKit.

MapKitMapDesign

Notes

Standard

Staðlaða götukortið

Satellite

Gervihnattamyndir

Hybrid

Gervihnattamyndir með vegum og merkingum

MutedStandard

Bakgrunnar fyrir þín eigin gögn

SatelliteFlyover / HybridFlyover

Fyrir svæði með Flyover-þekju

Bilanaleit

Kortið birtist ekki

Athugaðu að teiknið sé ekki tómur strengur.
Athugaðu að teiknið sé ekki útrunnið — notaðu authorizationCallback til að endurnýja það á skjám sem standa lengi opnir.

Það smíðast ekki á React 18

Þessi pakki einn krefst React 19 eða nýrra.

Skipti um þjónustuaðila kasta villu um röð hooka

React leyfir ekki að röð hook-kalla breytist. Búðu til eina litla einingu á hvern þjónustuaðila sem kallar á sitt eigið hook — það er einmitt uppbygging providers/ möppunnar í sýnisforritinu.

Næst

MapKit-þjónustuaðilinn á iOS þarf hvorki lykil né frumstillingu — sami skjákóði virkar á báðum, og hvor vettvangur fer sína leið.