MapConductorUppsetning á HERE
Hvernig nota má HERE á vefnum gegnum MapConductor. HERE Maps API for JavaScript kemur frá CDN fremur en npm, og þú smíðar H.service.Platform sjálf/ur og réttir sýninni.
Áður en þú byrjar
Settu upp
Pakkinn sjálfur pakkar ekki JS-API HERE með — hann notar H-alheimsbreytuna sem síðan þín hleður.
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-hereHlaðið JS-API HERE
Hlaðið henni frá CDN með script-tögum, nákvæmlega eins og byrjendaleiðbeiningar HERE gera. @mapconductor/react-for-here gerir ráð fyrir H-alheimsbreytunni sem þau birta.
<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" />
Smíðaðu pallinn og réttu hann sýninni
Hjá HERE fer lykillinn inn í H.service.Platform, ekki í stöðu-hookið. Smíðaðu pallinn með þínum eigin auðkennum og sendu hann í platform-eigind sýnarinnar — vefðu hann í useMemo svo hann lifi af endurteiknanir.
const platform = useMemo(
() => new H.service.Platform({ apikey: import.meta.env.VITE_HERE_API_KEY }),
[],
);
<HereMapView2D state={state} platform={platform}>{children}</HereMapView2D>STAÐFESTA
Það sem þú ættir að sjá
Þegar HERE-kortið teiknast ertu búin/n. HERE-þjónustuaðilinn á vefnum er aðeins tvívíður.
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>
);
}Kortahönnun
HereMapDesign varpast á kortaskemu HERE.
Bilanaleit
H er undefined
- Athugaðu að script-tögin í index.html hlaðist, og í réttri röð: core → core-legacy → service → ui → mapevents.
- Ef þú teiknar á þjóni skaltu gæta þess að pallurinn sé aðeins smíðaður í vafranum.
Kortið birtist ekki
- Athugaðu apikey-inn sem þú sendir til H.service.Platform.
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
Fyrir stór merkjasöfn skaltu senda markerTilingOptions — föst merki eru þá teiknuð saman sem rasteryfirlag.