>更新:
我正在尝试用语言翻译传单路由组件:"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)
}
使用"语言:'sp'",形式被移走,但不入。我知道我必须使用格式化程序,但我试图把它放在路由.control,routeing.plan...(还有更多地方只是为了测试它(并且它不起作用(地图不显示(
@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)
抱歉挖掘这个话题,但我无法用法语翻译说明......
我直接在 L.Routing.control 和格式化程序中设置语言选项"fr"......
我尝试调试完成本地化的行,并在传单路由机的第 16353 行看到我的问题.js :
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 © <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 © <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'}),
RTFM的一个案例。
如果您仔细查看 Leaflet 路由机的 API 文档,您会注意到 L.Routing.Control
没有language
选项,并且language
选项仅适用于 L.Routing.Formatter
的实例,并且L.Routing.Control
可以采用可以容纳L.Routing.Formatter
实例的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
},
(附注:"prop"是reactjs俚语,这个词在这里不适用(