1

更新：

我正在尝试用语言翻译传单路由组件：'sp'，但它对我不起作用。 

const createRoutingControl = () => {
L.Routing.control({      
  router: L.Routing.mapbox(config.features.routing.key),      
  plan: new (L.Routing.Plan.extend({
    createGeocoders: function () {
      let container = L.Routing.Plan.prototype.createGeocoders.call(this)
      let reverseRoute = createButton('↑↓', container)
      let copyToClipboard = createButton('5', container, true)       

      return container
    }
  }))([], {
    geocoder: geocoder,
    language: 'sp'
  }),
  units: config.features.routing.units,
  showAlternatives: true,
  autoRoute: true,
  routeWhileDragging: true,      
}).addTo(map)

}

使用 "language:'sp'"会翻译表格，但不会翻译 instruccions。我知道我必须使用格式化程序，但我试图把它放在 routing.control、routing.plan...（以及更多地方只是为了测试它）并且它不起作用（地图不显示）

4

3 回答 3

2

@IvanSanchez 的回复几乎是正确的：Control确实没有language选项，但其他几个类有（不确定这是否被正确记录，抱歉）。

话虽如此，作为默认值，Control该类在实例化其子组件时传递您给它的任何选项，因此language作为选项传递Control也会将其传递给默认格式化程序、路由器等。例外是当您提供您自己实例化的子组件，Plan例如您的示例：对于这种情况，您需要显式提供选项（就像您已经做的那样）。

所以我认为这段代码应该可以解决这个问题：

const createRoutingControl = () => {
L.Routing.control({      
  router: L.Routing.mapbox(config.features.routing.key),      
  plan: new (L.Routing.Plan.extend({
    createGeocoders: function () {
      let container = L.Routing.Plan.prototype.createGeocoders.call(this)
      let reverseRoute = createButton('↑↓', container)
      let copyToClipboard = createButton('5', container, true)       

      return container
    }
  }))([], {
    geocoder: geocoder,
    language: 'sp'
  }),
  units: config.features.routing.units,
  showAlternatives: true,
  autoRoute: true,
  routeWhileDragging: true,
  language: 'sp'
}).addTo(map)
于 2018-04-18T10:25:18.950 回答
0

这是 RTFM 的一个案例。

如果您仔细查看 Leaflet Routing Machine 的 API 文档，您会注意到它L.Routing.Control没有选项language，并且该选项language仅适用于 的实例L.Routing.Formatter，并且 aL.Routing.Control可以采用formatter可以容纳L.Routing.Formatter. 所以把所有东西放在一起...

L.Routing.control({
  router: L.Routing.mapbox(config.features.routing.key),     
  formatter: L.Routing.formatter({
    language: 'sp'
    units: config.features.routing.units,
  }),
  showAlternatives: true,
  autoRoute: true,
  // ... etc
},

（PS：“prop”是reactjs的俚语，这个词在这里不适用）

于 2018-04-17T10:38:35.050 回答
0

很抱歉挖掘了这个话题，但我无法将说明翻译成法语......

我直接在 L.Routing.control 和格式化程序中设置了语言选项“fr”...

我尝试调试完成本地化的行，我在 leaflet-routing-machine.js 的第 16353 行看到了我的问题：

    formatInstruction: function(instr, i) {
        if (instr.text === undefined) {
            return this.capitalize(L.Util.template(this._getInstructionTemplate(instr, i),
                .....
                })));
        } else {
            return instr.text;
        }

instr.text 已经初始化的地方...

如果我在调试时将 instr.text 重置为“未定义”，则说明翻译得很好......

你知道我的问题吗？我的代码如下：

$script(['https://unpkg.com/leaflet/dist/leaflet-src.js'], () =>{
$script(['https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js'], () => {

this.map = L.map(element);

L.tileLayer('//{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="//osm.org/copyright">OpenStreetMap</a>  - rendu <a href="//openstreetmap.fr">OSM France</a> ',
maxZoom: 18
}).addTo(this.map);      


this.map = L.map(element);

L.tileLayer('//{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
	attribution: 'Map data &copy; <a href="//osm.org/copyright">OpenStreetMap</a>  - rendu <a href="//openstreetmap.fr">OSM France</a> ',
	maxZoom: 18
}).addTo(this.map);      

let control1 = L.Routing.control(
	{
		router: L.routing.mapbox(this.key.MapboxKey),   
				
		language: 'fr',
		formatter:  new L.Routing.Formatter({
			language: 'fr' 
		}),

		waypoints: [
			L.latLng(47.928927, 7.538860),
			L.latLng(48.044444, 7.299279),
			L.latLng(47.857503, 6.821690),
			L.latLng(47.506390, 6.996181),
			L.latLng(47.586881, 7.25652)
		],
		routeWhileDragging: true
	})
	.on('routingerror', function(e) {
		try {
			this.map.getCenter();
		} catch (e) {
			this.map.fitBounds(L.latLngBounds(control1.getWaypoints().map(function(wp) { return wp.latLng; })));
		}

		handleError(e);
	})
	.addTo(this.map);
L.Routing.errorControl(control1).addTo(this.map);

==================================================== ===================

当我同时找到解决方案时，我将其放弃，因为它似乎没有记录在案：

在创建“路由器”时，我必须添加语言选项作为 mapbox 函数的参数：

L.routing.mapbox(this.key.MapboxKey, {language: 'fr'}),
于 2018-10-03T15:19:10.577 回答