Skjölun / Uppsetning / React / Longdo

Uppsetning á Longdo

Hvernig nota má Longdo Map á vefnum gegnum MapConductor. Það er sterki kosturinn fyrir Taíland og vefur Longdo Map JS API3.

PACKAGE

react-for-longdo

API KEY

Nauðsynlegt

CSS

Enginn

REACT NATIVE

ekkert

Sami þjónustuaðili, aðrir vettvangarAndroid iOS

Skoða sýnidæmiVerslanakort · React ↗

Áður en þú byrjar

Node.js 18 eða nýrra

API-lykill gefinn út í stjórnborði Longdo Map

STEP 01

Settu upp

Pakkinn hleður Longdo Map JS API3 kvikt með lyklinum þínum — ekkert script-tag að skrifa.

terminalnpm

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

STEP 02

Sendu API-lykilinn til stöðu-hooksins

Skráðu lykilinn á lénið þitt. Sé hann tómur strengur hleðst kortið alls ekki.

LongdoMap.tsxTypeScript · React

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

VARÚÐ

Sendu lykilinn úr umhverfisbreytu við smíði (import.meta.env.VITE_* í Vite) og haltu honum utan við útgáfustýringu. Hann berst í vafrann hvort eð er, svo takmarkaðu hann alltaf eftir tilvísanda eða léni svo það sé meinlaust þótt hann sjáist.

STAÐFESTA

Það sem þú ættir að sjá

Uppsetningunni er lokið þegar kort miðað á Bangkok teiknast.

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>
  );
}

Kortahönnun

LongdoDesign varpast á grunnlög Longdo.

LongdoDesign

Notes

Normal / Easy / Political

Staðalfjölskyldan

Pastel / PastelGray / Light / Gray

Daufir stílar

Night / Dark / Hard

Dökkir stílar með miklum birtuskilum

Satellite / Hybrid

Gervihnattamyndir og blandaðir stílar

Osm

Byggt á OpenStreetMap

Bilanaleit

Kortið birtist ekki

Athugaðu að apiKey sé ekki tómur strengur.
Staðfestu að lykillinn sé skráður á lénið sem þú birtir frá.

Kortið frumstillist tvisvar í þróun

React StrictMode keyrir effect tvisvar. Hver þjónustuaðili greinir það og hendir keyrslunni sem var hætt við, svo þú þarft ekki að slökkva á StrictMode.

Næst

LongdoMapView er þrívíða sýnin og LongdoMapView2D sú tvívíða; þær deila stöðuhlut.