如何翻译“反应手册”的说明？

Question

我遇到了一个问题，说明翻译传单-路由机。我不能把它翻译成另一种语言(但单位指标改变了)，我真的不明白，我在这里做错了什么。设置语言的唯一方法是为Routing.Control设置自定义格式化程序，但它不起作用。这是我的密码。我用的是react传单v.4

import { useEffect, useCallback, useRef, MutableRefObject } from 'react';

import L, { LatLng, Routing } from 'leaflet';
import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
import iconUrl from 'leaflet/dist/images/marker-icon.png';
import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
import * as ReactLeaflet from 'react-leaflet';

import 'leaflet/dist/leaflet.css';
import 'leaflet-routing-machine';
import 'leaflet-routing-machine/src/localization';
import 'lrm-graphhopper';

const { MapContainer } = ReactLeaflet;
const DEFAULT_CENTER = [50.093572, 118.036912];

function MyComponent({
  routingRef,
}: {
  routingRef: MutableRefObject<Routing.Control | null>;
}) {
  const map = ReactLeaflet.useMap();

  const markerRef = useRef<L.Marker | null>(null);

  ReactLeaflet.useMapEvents({
    click(e) {
      if (markerRef.current) {
        map.removeLayer(markerRef.current);
        routingRef.current?.getPlan().setWaypoints([]);
        markerRef.current = null;
      }

      markerRef.current = new L.Marker(e.latlng, {
        draggable: false,
        interactive: false,
      });
      if (markerRef.current) {
        map.removeLayer(markerRef.current);
        routingRef.current
          ?.getPlan()
          .setWaypoints([
            markerRef.current.getLatLng(),
            { lat: DEFAULT_CENTER[0], lng: DEFAULT_CENTER[1] } as LatLng,
          ]);
      }
    },
  });

  const control = useCallback(
    () =>
      L.Routing.control({
        showAlternatives: true,
        autoRoute: true,
        formatter: new Routing.Formatter({
          language: 'ru',
          distanceTemplate: '{value} {unit}',
        }),

        summaryTemplate:
          '<h2 >Дистанция: <span>{distance}</span></h2><h3> Время: {time}</h3>',
        routeLine: (route, opt) => {
          return new Routing.Line(route, {
            ...opt,
            styles: [{ color: 'green', opacity: 1, weight: 5 }],
          });
        },
        useZoomParameter: false,
        addWaypoints: false,
        router: (L.Routing as any).graphHopper(
          'api-key',
          {
            urlParameters: {
              vehicle: 'foot',
            },
          }
        ),
        show: true,
        routeWhileDragging: true,
        fitSelectedRoutes: false,
      }).addTo(map),
    [map]
  );

  useEffect(() => {
    (async function init() {
      L.Icon.Default.mergeOptions({
        iconRetinaUrl: iconRetinaUrl.src,
        iconUrl: iconUrl.src,
        shadowUrl: shadowUrl.src,
      });

      routingRef.current = control();
    })();
  }, [control, routingRef]);

  return null;
}

const Map = ({ children, className, ...rest }: any) => {
  const routingRef = useRef<Routing.Control | null>(null);

  return (
    <>
      <MapContainer
        center={DEFAULT_CENTER}
        zoom={16}
        {...rest}
        className="h-full"
      >
        <>
          <ReactLeaflet.TileLayer
            url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
            attribution="Барбершоп Bronson в Краснокаменске"
          />
          <ReactLeaflet.Marker
            position={DEFAULT_CENTER as L.LatLngExpression}
            // icon={new L.Icon({})}
          >
            <ReactLeaflet.Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </ReactLeaflet.Popup>
          </ReactLeaflet.Marker>
          <MyComponent routingRef={routingRef} />
        </>
      </MapContainer>
    </>
  );
};

export default Map;

最后我收到了什么，部分翻译文本

请提供任何解决方案。希望你今天过得愉快！

Answer 1

您可以使用_formatter.formatInstruction进行说明。

例如：

var text = router._formatter.formatInstruction(router._routes[0].instructions[0], 0);
var distance = router._formatter.formatDistance(router._routes[0].instructions[0].distance);

为了同样的问题

希望它能帮到你。