通过 onclick 使用定位的 HTML 代码

Question

我正在尝试在单击我的 html 侧边栏中的标记图标时激活定位器插件。我希望它在单击时使用定位器功能而不将定位器插件添加到地图中。下面的代码将 fa-map-marker 图标添加到侧边栏，当您单击该图标时，它将定位器控件添加到传单地图。单击添加的图标后，它会使用 L.control.locate 函数。除了将定位器插件添加到我的地图之外，我可以通过 onclick 以某种方式使用定位器的功能吗？最终结果将允许用户通过单击 fa-map-marker 图标直接获取他的位置。

侧边栏-v2：https://github.com/Turbo87/sidebar-v2

L.control.locate：https://github.com/domoritz/leaflet-locatecontrol

<div class="sidebar-tabs">
  <ul role="tablist">
    <li>
      <a 
       title="Geolocate" role="tab" target="_blank" onClick="L.control.locate().addTo(map);" <i class="fa fa-map-marker"> </i>
      </a>
    </li>
  </ul>
</div>

Answer 1

让我从leaflet-locatecontrol documentation复制粘贴...

您可以在定位控件对象上调用start() 或stop() 来设置页面加载时的位置。

// create control and add to map
var lc = L.control.locate().addTo(map);

// request location update and set location
lc.start();

想将它附加到某个 DOM 元素的 click 事件中吗？没问题...

<a href='' id='foobar'>Try to get my location</a>

---

var lc = L.control.locate().addTo(map);
L.DomEvent.on( document.getElementById('foobar'), 'click', lc.start );

注意lc.start 上缺少() - 这是因为L.DomEvent.on() 需要对函数的引用，而不是函数调用的结果。