HTML 通过 onclick 使用定位的代码

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...

复制粘贴

You can call start() or stop() on the locate control object to set the location on page load for example.
// 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() 需要对函数的引用，而不是函数调用的结果。

HTML 通过 onclick 使用定位的代码

HTML code for using locate via onclick

html

javascript

sidebar

locate

leaflet