locate via 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()は機能ではなく、関数呼び出しの結果への参照を必要とするためです。