MapConductorการตั้งค่า HERE
ขั้นตอนการใช้ HERE บนเว็บผ่าน MapConductor HERE Maps API for JavaScript โหลดจาก CDN ไม่ใช่ npm และสร้าง H.service.Platform ที่ฝั่งแอปแล้วส่งไปยังมุมมอง
ก่อนเริ่ม
ติดตั้ง
แพ็กเกจเองไม่รวม JS API ของ HERE จะใช้ H global ที่โหลดที่ฝั่งหน้าเว็บ
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-hereโหลด JS API ของ HERE
เช่นเดียวกับ quickstart ของ HERE โหลดผ่าน script tag จาก CDN @mapconductor/react-for-here ถือว่า H global ที่พวกเขาเผยแพร่มีอยู่
<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 ไม่ใช่ state hook สร้าง Platform ด้วยข้อมูลรับรองของแอปแล้วส่งไปที่ platform props ของมุมมอง ถ้าสร้างด้วย useMemo จะไม่ถูกสร้างใหม่ทุกครั้งที่ rerender
const platform = useMemo(
() => new H.service.Platform({ apikey: import.meta.env.VITE_HERE_API_KEY }),
[],
);
<HereMapView2D state={state} platform={platform}>{children}</HereMapView2D>ตรวจสอบ
สิ่งที่ควรเห็น
เสร็จสิ้นเมื่อแผนที่ HERE ปรากฏขึ้น ผู้ให้บริการ web ของ 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 เป็น undefined
- ตรวจสอบว่า script tag ใน index.html โหลดแล้วและลำดับถูกต้องหรือไม่ (core → core-legacy → service → ui → mapevents)
- หากทำ SSR ให้สร้าง Platform เฉพาะที่ฝั่งไคลเอนต์
แผนที่ไม่แสดง
- ตรวจสอบว่า apikey ที่ส่งไปยัง H.service.Platform ถูกต้องหรือไม่
เมื่อสลับผู้ให้บริการเกิดข้อผิดพลาดลำดับของ hook
- React ไม่สามารถเปลี่ยนลำดับการเรียก hook ได้ สร้างคอมโพเนนต์เล็กๆ สำหรับแต่ละผู้ให้บริการ และเรียก hook ของผู้ให้บริการนั้นภายใน ไดเร็กทอรี providers/ ในแอปตัวอย่างมีโครงสร้างนี้
ถัดไป
หากมีมาร์กเกอร์มาก ให้ส่ง markerTilingOptions เพื่อวาดกลุ่มมาร์กเกอร์แบบคงที่เป็นแผนภูมิซ้อนทับแบบแรสเตอร์รวมกัน