MapConductorHERE einrichten
Anleitung, um HERE im Web über MapConductor zu verwenden. HERE Maps API for JavaScript wird über CDN statt npm geladen; Sie erstellen H.service.Platform auf Anwendungsseite und übergeben es an die Ansicht.
Bevor Sie beginnen
Installieren
Das Paket selbst enthält nicht die HERE JS API. Es wird das H-Global verwendet, das auf Seitenebene geladen wird.
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-hereHERE JS API laden
Wie im Quickstart von HERE wird es über script-Tag aus CDN geladen. @mapconductor/react-for-here setzt das von ihnen veröffentlichte H-Global voraus.
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script> <script src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js"></script> <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script> <script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script> <script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script> <link rel="stylesheet" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
Platform erstellen und an Ansicht übergeben
Bei HERE übergeben Sie den Schlüssel nicht an einen State-Hook, sondern an H.service.Platform. Erstellen Sie Platform mit den Anwendungsanmeldeinformationen und übergeben Sie es an platform props der Ansicht. Wenn Sie es mit useMemo erstellen, wird es bei jedem Rerender nicht neu erstellt.
const platform = useMemo(
() => new H.service.Platform({ apikey: import.meta.env.VITE_HERE_API_KEY }),
[],
);
<HereMapView2D state={state} platform={platform}>{children}</HereMapView2D>PRÜFEN
Was Sie sehen sollten
Fertig, wenn die HERE-Karte erscheint. Der HERE-Provider im Web unterstützt nur 2D-Ansichten.
import { useMemo, useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { HereMapDesign, HereMapView2D, useHereViewState } from '@mapconductor/react-for-here';
const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });
export function HereMap() {
const state = useHereViewState({
mapDesignType: HereMapDesign.NormalDay,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});
// HERE Maps API for JavaScript is loaded from the CDN (see index.html);
// the platform must be created with the host page's own credentials.
const platform = useMemo(
() => new H.service.Platform({ apikey: import.meta.env.VITE_HERE_API_KEY }),
[],
);
const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));
return (
<HereMapView2D state={state} platform={platform}>
<Marker state={markerState} />
</HereMapView2D>
);
}Kartendesigns
HereMapDesign unterstützt HERE Map-Schemes.
Fehlerbehebung
H wird undefined
- Prüfen Sie, ob das script-Tag in index.html geladen ist und ob die Reihenfolge stimmt (core → core-legacy → service → ui → mapevents).
- Bei SSR führen Sie die Erstellung von Platform nur auf der Clientseite aus.
Karte wird nicht angezeigt
- Prüfen Sie, ob der an H.service.Platform übergebene apikey korrekt ist.
Beim Wechseln des Providers tritt ein Hook-Reihenfolgenfehler auf
- React kann die Reihenfolge von Hook-Aufrufen nicht ändern. Erstellen Sie pro Provider eine kleine Komponente und rufen darin den Hook dieses Providers auf. Das Verzeichnis providers/ der Beispielanwendung hat diese Struktur.
Weiter
Wenn es viele Marker gibt, übergeben Sie markerTilingOptions; dadurch werden statische Markergruppen gemeinsam als Raster-Overlay dargestellt.