如何使用 leaflet-locatecontrol 中的 "createButtonCallback"

Question

我想替换 leaflet-locatecontrol 中的默认定位按钮侧边栏内 div 元素中的另一个插件（传单侧边栏 v2）。

这是一个例子： https://vprint.github.io/#14/13.4413/103.8591

我想做的是在单击用此行创建的左侧位置按钮（左侧边栏上的按钮）时调用定位功能

<li class="disabled">

    <a href="#locate" role="tab" onclick="LocateMe()">
        <i class="fas fa-map-marker-alt"></i>
    </a>

</li>

我在 locate 插件文档中看到了 "CreateButtonCallback" 选项，但我该如何使用它来解决我的问题？

我找到的关于它的唯一文档是这个，但我不明白它:

/**
* This callback can be used in case you would like to override button creation behavior.
* This is useful for DOM manipulation frameworks such as angular etc.
* This function should return an object with HtmlElement for the button (link property) and the icon (icon property).
*/
createButtonCallback: function (container, options) {
   var link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
   link.title = options.strings.title;
   var icon = L.DomUtil.create(options.iconElementTag, options.icon, link);
   return { link: link, icon: icon };
},

Answer 1

您不需要在 href 上点击 onClick

<li class="disabled">

    <a href="javascript:LocateMe()" role="tab">
        <i class="fas fa-map-marker-alt"></i>
    </a>

</li>

编辑（编辑问题后）

Answer 2

回答我自己的问题：

我终于按照这个技巧找到了解决方案：Adding Leaflet layer control to sidebar

如果你想在侧边栏（或任何其他插件）中添加位置控制，你必须在 li class 中创建一个 div 元素，如下所示：

HTML

<li class="disabled">
  <a href="#LocateMe" role="tab">
    <div id="#LocateMe"></div>
   </a>
</li>

然后修改JS

JS

var positioncontrol = L.control.locate({
   position: 'topleft',
   showCompass: true,
   strings: {title: "Location"},
   icon: 'fas fa-map-marker-alt',
   locateOptions: {enableHighAccuracy: true}
}).addTo(map);

var htmlObject = positioncontrol.getContainer();
var a = document.getElementById('#LocateMe')
function setParent(el, newParent){
  newParent.appendChild(el);
}
setParent(htmlObject, a);

然后你必须编辑 CSS 以便它可以很好地匹配侧边栏

如何使用 leaflet-locatecontrol 中的 "createButtonCallback"

How to use "createButtonCallback" from leaflet-locatecontrol

html

javascript

sidebar

leaflet