Leaflet 传单自定义控件位置：中间

我们正在连接一个眼动跟踪器来控制传单地图（平移、缩放等）。我们希望有一个显示在地图中心的自定义控件（用于菜单功能）当前传单不支持位置：“中心”（支持左上角等）想法？

在传单地图上添加自定义控件的操作如下：

例如，徽标：

var logo=L.control({
位置：'左上'
});
logo.onAdd=功能（地图）{
这个.u div=L.DomUtil.create（'div'，'myControl'）；
var img_log=“”；
这是.\u div.innerHTML=img\u log；
把这个还给我；
}
logo.addTo（地图）；

然后，您可以将CSS样式添加到myClass以使其居中：（这部分我还没有测试过）

.myClass{
垫面：50%；
左：50%；
}

您可以简单地将.ployate left类重写为this，控件将水平居中

.leaflet-left {
    left: 50%;
    transform: translate(-50%, 0%);
}

若要垂直居中，只需覆盖该类。传单顶部为：

.leaflet-top {
    top: 50%;
    transform: translate(0%, -50%);
}

注意：这些更改将影响地图上的其他控件，例如缩放控件

编辑：

如果要将该功能添加到手册中，以便其他控件不受影响，可以执行以下操作：

我想从4900行开始

t("top", "left"),
t("top", "right"),
t("bottom", "left"),
t("bottom", "right"),

添加以下两行：

t("top", "center"),
t("bottom", "center")

这将允许使用位置“上止点”和“下止点”

然后简单地为“传单中心”添加css类：

.leaflet-center {
    left: 50%;
    transform: translate(-50%, 0%);
}

---

我知道这是一个老话题，但无论如何，这是我的解决办法

添加一些css：

。传单中心{
左：50%；
转换：转换（-50%，0%）；
}
.小叶中部{
最高：50%；
位置：绝对位置；
z指数：1000；
指针事件：无；
转换：翻译（0%，-50%）；
}
.传单-中心。传单-中间{
转换：翻译（-50%，-50%）；
}

并对定位方法进行了改进

L.Map.include({
_initControlPos:函数（）{
var corners=this.\u controlCorners={}，
l='传单-'，
容器=此。\u controlContainer=
创建（'div'，L+'controlcontainer'，this.\u container）；
函数createCorner（vSide、hSide）{
变量className=l+vSide+“”+l+hSide；
corners[vSide+hSide]=L.DomUtil.create（'div'，className，container）；
}
createCorner（“顶部”、“左侧”）；
createCorner（“顶部”、“右侧”）；
createCorner（“底部”、“左侧”）；
createCorner（“底部”、“右侧”）；
createCorner（“顶部”、“中心”）；
createCorner（‘中间’、‘中心’）；
createCorner（'中间'，'左'）；
createCorner（‘中间’、‘右’）；
createCorner（“底部”、“中心”）；
}
});
现在你有5个新职位要使用。

这个答案不起作用。控件是一个div的子控件，其类传单顶部传单左侧。这个div没有贴图的宽度…因此左填充50%只将控件居中于其父div中，而不将控件居中于贴图中看起来像是对