leaflet - 自定义传单路由错误（选项）

Question

我正在使用 Leaflet-routing-machine，

我将错误控制添加到我的地图中，如下所示：

L.Routing.errorControl(this.control).addTo(map);

对于我使用的风格：

.leaflet-routing-error {
  width: 320px;
  background-color: rgb(238, 153, 164);
  padding-top: 4px;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

这就是我得到的：

我没有找到很多解释。有谁知道如何自定义更多，更改语言，隐藏/显示......？

Answer 1

阅读此源代码后 ，您可以重新定义header和fromat 消息函数

L.Routing.errorControl(control, {
            header: 'Routing error',
            formatMessage(error) {
                if (error.status < 0) {
                    return 'Calculating the route caused an error. Technical description follows:  <code><pre>' +
                        error.message + '</pre></code';
                } else {
                    return 'The route could not be calculated. ' +
                        error.message;
                }
            }
        }).addTo(map);

我相信在你的控制下你可以重新定义这两个选项

您也可以使用带有类leaflet-bar leaflet-routing-error的leaflet元素并在其上注入更多的html代码，就像他们创建警报一样

var L = require('leaflet');

        onAdd: function() {
            var header,
                message;

            this._element = L.DomUtil.create('div', 'leaflet-bar leaflet-routing-error');
            this._element.style.visibility = 'hidden';

            header = L.DomUtil.create('h3', null, this._element);
            message = L.DomUtil.create('span', null, this._element);

            header.innerHTML = this.options.header;

            return this._element;
        }

所以检索div类或 idleaflet-routing-error并在其上注入您想要的 html 组件模板应该没问题