Doku / Einrichtung / React / Longdo

Longdo einrichten

Dies sind die Schritte zur Verwendung von Longdo Map im Web über MapConductor. Ein Provider, der auf Karten von Thailand spezialisiert ist und das Longdo Map JS API3 kapselt.

PACKAGE

react-for-longdo

API KEY

Erforderlich

CSS

Nicht erforderlich

REACT NATIVE

Keine

Derselbe Anbieter, andere PlattformenAndroid iOS

Demo ansehenFilialkarte · React ↗

Bevor Sie beginnen

Node.js 18 oder höher

API-Schlüssel, der in der Longdo Map-Konsole ausgestellt wurde

STEP 01

Installieren

Longdo Map JS API3 lädt das Paket dynamisch mit Schlüssel. Es ist nicht erforderlich, ein script-Tag zu schreiben.

terminalnpm

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

STEP 02

API-Schlüssel an einen State-Hook übergeben

Der Schlüssel wird an eine Domäne gebunden registriert. Wenn die Zeichenfolge leer bleibt, wird die Karte nicht geladen.

LongdoMap.tsxTypeScript · React

const state = useLongdoViewState({
  apiKey: import.meta.env.VITE_LONGDO,
  mapDesignType: LongdoDesign.Normal,
  cameraPosition: createMapCameraPosition({ position: BANGKOK, zoom: 12 }),
});

ACHTUNG

Der Schlüssel wird über eine Umgebungsvariable zum Build-Zeitpunkt (bei Vite z. B. import.meta.env.VITE_*) übergeben und sollte nicht in die Quellcodeverwaltung eingecheckt werden. Da der Schlüssel an das Frontend übergeben wird, müssen unbedingt Referrer-Einschränkungen und Domäneneinschränkungen festgelegt werden, um Schäden zu vermeiden, falls der Schlüssel öffentlich wird.

PRÜFEN

Was Sie sehen sollten

Wenn die Karte mit Bangkok als Zentrum angezeigt wird, sind Sie fertig.

LongdoMap.tsxTypeScript · React

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { LongdoDesign, LongdoMapView2D, useLongdoViewState } from '@mapconductor/react-for-longdo';

const BANGKOK = createGeoPoint({ latitude: 13.7563, longitude: 100.5018 });

export function LongdoMap() {
  const state = useLongdoViewState({
    apiKey: import.meta.env.VITE_LONGDO,
    mapDesignType: LongdoDesign.Normal,
    cameraPosition: createMapCameraPosition({ position: BANGKOK, zoom: 12 }),
  });
  const [markerState] = useState(() => createMarkerState({ id: 'bkk', position: BANGKOK }));

  return (
    <LongdoMapView2D state={state} style={{ height: 480 }}>
      <Marker state={markerState} />
    </LongdoMapView2D>
  );
}

Kartendesigns

LongdoDesign unterstützt die Basislayer von Longdo.

LongdoDesign

Notes

Normal / Easy / Political

Standard-Stil

Pastel / PastelGray / Light / Gray

Blasser Stil

Night / Dark / Hard

Dunkel & hoher Kontrast

Satellite / Hybrid

Satellitenbild und Hybrid

Osm

OpenStreetMap-Basis

Fehlerbehebung

Die Karte wird nicht angezeigt

Überprüfen, ob apiKey nicht leer ist.
Überprüfen Sie in der Konsole, ob der Schlüssel mit der Ausgabedomäne verknüpft ist.

Die Karte wird während der Entwicklung doppelt initialisiert

React StrictMode führt den Effekt zweimal aus. Da jeder Provider dies erkennt und einen von beiden verwirft, ist es nicht erforderlich, StrictMode zu entfernen.

Weiter

LongdoMapView ist 3D, LongdoMapView2D ist 2D. Beide teilen sich dasselbe Zustandsobjekt.