MapConductorDocumentación / Configuración / React / Longdo
Configurar Longdo
Estos son los pasos para usar Longdo Map en la web a través de MapConductor. Es un proveedor especializado en mapas de Tailandia y que envuelve el Longdo Map JS API3.
PACKAGE
react-for-longdo
API KEY
Requerido
CSS
No requerido
REACT NATIVE
Ninguno
Antes de empezar
Node.js 18 o superior
Clave de API emitida en la consola de Longdo Map
STEP 01
Instalar
Longdo Map JS API3 carga el paquete dinámicamente con clave. No es necesario escribir una etiqueta script.
terminalnpm
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-longdoSTEP 02
Pasar la clave de API a un state hook
La clave se registra vinculada a un dominio. Si permanece como una cadena vacía, el mapa no se cargará.
LongdoMap.tsxTypeScript · React
const state = useLongdoViewState({
apiKey: import.meta.env.VITE_LONGDO,
mapDesignType: LongdoDesign.Normal,
cameraPosition: createMapCameraPosition({ position: BANGKOK, zoom: 12 }),
});PRECAUCIÓN
La clave se pasa a través de una variable de entorno en el momento de la compilación (para Vite, import.meta.env.VITE_*) y no debe incluirse en el control de fuente. Dado que la clave llega al frontend, se deben establecer restricciones de referer y de dominio para evitar daños si se hace pública.
VERIFICAR
Lo que deberías ver
Si el mapa aparece con Bangkok en el centro, ha terminado.
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>
);
}Diseños de mapa
LongdoDesign es compatible con las capas base de Longdo.
LongdoDesign
Notes
Normal / Easy / Political
Estilo estándar
Pastel / PastelGray / Light / Gray
Estilo suave
Night / Dark / Hard
Oscuro y alto contraste
Satellite / Hybrid
Imagen satelital e híbrido
Osm
Base de OpenStreetMap
Solución de problemas
El mapa no aparece
- Verifique que apiKey no sea una cadena vacía.
- Verifique en la consola si la clave está vinculada al dominio de entrega.
El mapa se inicializa dos veces solo durante el desarrollo
- React StrictMode ejecuta el efecto dos veces. Cada proveedor detecta esto y descarta uno de ellos, por lo que no es necesario eliminar StrictMode.
Siguiente
LongdoMapView es 3D, LongdoMapView2D es 2D. Ambos comparten el mismo objeto de estado.