Leaflet 如何将自定义用户界面添加到传单地图？

我正在使用传单创建一个地图游戏（非常基本）

基本上，我想在地图上添加一个输入

，这样当用户在某个位置键入时，它将平移到地图上的一个坐标

我尝试过创建元素并将其添加到地图

，其变化如下：

var d1=document.getElementsByClassName（“传单控制容器”）[0]；
d1.插入相邻的TML（'afterbegin'，'two'）；

但是

显示在地图后面，图像覆盖了地图

---

如何让它像缩放控件一样显示？

如果我理解正确，您希望创建自己的“控件”（在视觉上与传单默认缩放控件类似，但功能不同），这样可以查找不同的位置并导航到它们

对于类似于传单默认控件（缩放、图层控件）的控件样式，您需要：

延伸

指定一个方法，该方法返回要用作映射上控件的DOM元素。步骤1和2将使控件能够作为标准控件添加到地图角，并具有适当的z索引和边距

使用您自己的类设置样式。要获得类似于缩放和图层控件的视觉效果，可以在类上构建：

。单张栏{
盒影：0 1px 5px rgba（0,0,0,0.65）；
边界半径：5px；
}

示例：（源自“”教程）

var-map=L.map（'map'）.setView（[48.86,2.35]，11）；
L.Control.MyControl=L.Control.extend({
onAdd：函数（映射）{
var el=L.DomUtil.create（'div'，'传单栏我的控件'）；
el.innerHTML=‘我的控件’；
返回el；
},
onRemove：函数（映射）{
//这里没什么可做的
}
});
L.control.myControl=函数（opts）{
返回新的L.Control.MyControl（opts）；
}
控制({
位置：“右上角”
}).addTo（地图）；
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）
。我的控件{
背景：#fff；
填充物：5px；
}

你可以从传单搜索插件中获得灵感。它甚至可以满足你的需要。@ghybs-thx。我看到了这篇博文，它符合我的答案。请随意写一个答案，这样我就可以接受了。