MapConductorHERE का सेटअप
MapConductor से वेब पर HERE का उपयोग करने की प्रक्रिया यहाँ दी गई है। HERE Maps API for JavaScript को npm के बजाय CDN से लोड किया जाता है, और एप्लिकेशन पक्ष में H.service.Platform बनाया जाता है और व्यू में पास किया जाता है।
शुरू करने से पहले
इंस्टॉल करें
पैकेज स्वयं HERE के JS API को शामिल नहीं करता है। पृष्ठ पक्ष द्वारा लोड किए गए H ग्लोबल का उपयोग किया जाता है।
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-hereHERE के JS API को लोड करें
HERE के स्वयं के क्विकस्टार्ट की तरह, CDN से script टैग के माध्यम से लोड किया जाता है। @mapconductor/react-for-here इन H ग्लोबल को प्रकाशित करने की अपेक्षा करता है।
<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 बनाएं और व्यू में पास करें
HERE में कुंजी को स्थिति हुक के बजाय H.service.Platform में पास किया जाता है। Platform को एप्लिकेशन पक्ष के प्रमाणीकरण विवरण से बनाया जाता है और इसे व्यू के platform props में पास किया जाता है। यदि आप useMemo में बनाते हैं, तो प्रत्येक री-रेंडर पर इसे पुनः नहीं बनाया जाएगा।
const platform = useMemo(
() => new H.service.Platform({ apikey: import.meta.env.VITE_HERE_API_KEY }),
[],
);
<HereMapView2D state={state} platform={platform}>{children}</HereMapView2D>जाँच
आपको क्या दिखना चाहिए
यदि HERE का मानचित्र दिखाई दे तो कार्य पूर्ण है। वेब का HERE प्रोवाइडर केवल 2D व्यू है।
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>
);
}मैप डिज़ाइन
HereMapDesign HERE के मानचित्र योजनाओं के अनुरूप है।
समस्या निवारण
H अपरिभाषित हो जाता है
- जांचें कि index.html में script टैग लोड हो रहा है या नहीं और क्रम सही है या नहीं (core → core-legacy → service → ui → mapevents)।
- यदि आप SSR कर रहे हैं, तो Platform के निर्माण को केवल क्लाइंट पक्ष पर किया जाना चाहिए।
मानचित्र नहीं दिख रहा है
- जांचें कि H.service.Platform में पास किया गया apikey सही है या नहीं।
प्रोवाइडर को बदलने पर हुक क्रम त्रुटि आती है
- React हुक कॉल क्रम को नहीं बदल सकता है। प्रत्येक प्रोवाइडर के लिए एक छोटा घटक बनाएं, और उसी के अंदर उस प्रोवाइडर के हुक को कॉल करें। नमूना एप्लिकेशन का providers/ निर्देशिका यही संरचना है।
आगे
यदि मार्कर कई हैं, तो markerTilingOptions पास करने पर स्थिर मार्कर समूह को रेखापुंज ओवरले के रूप में एक साथ प्रदर्शित किया जाएगा।