web-dev-qa-db-ja.com

リーフレットのマーカー、クリックイベント

var map = L.map('map');
var marker = L.marker([10.496093,-66.881935]).on('click', onClick);
function onClick(e) {alert(e.latlng);}
marker.addTo(map)

マーカーをクリックすると、アラートメッセージは次のようになります。

しかし、変数マップに配置すれば機能します！ （緯度と経度を表示）

map.on('click', onClick);

マーカーで機能しない理由を誰かが知っていますか？

javascriptleaflet
52
Jonathan García

私は解決策を見つけました：

function onClick(e) {alert(this.getLatLng());}

マーカーのgetLatLng（）メソッドを使用しました

16
Jonathan García

受け入れられた答えは正しいです。しかし、私はもう少し明確にする必要があったので、誰か他の人もそうする場合に備えて：

Leafletを使用すると、マップ上で行うほぼすべてのイベント（この場合はマーカー）でイベントを発生させることができます。

だから、あなたはcould上記の質問で提案されているようにマーカーを作成します：

L.marker([10.496093,-66.881935]).addTo(map).on('mouseover', onClick);

次に、onClick関数を作成します。

function onClick(e) {
    alert(this.getLatLng());
}

これで、そのマーカーにマウスを重ねると、現在の緯度/経度のアラートが発生します。

ただし、「mouseover」の代わりに「click」、「dblclick」などを使用し、lat/longに警告する代わりに、onClickの本体を使用して必要な操作を実行できます。

L.marker([10.496093,-66.881935]).addTo(map).on('click', function(e) {
    console.log(e.latlng);
});

ドキュメントは次のとおりです。 http://leafletjs.com/reference.html#events

61
Chris

次に、関数呼び出しを使用したjsfiddleを示します。 https://jsfiddle.net/8282emwn/

var marker = new L.Marker([46.947, 7.4448]).on('click', markerOnClick).addTo(map);

function markerOnClick(e)
{
  alert("hi. you clicked the marker at " + e.latlng);
}
16
Timo Sperisen

追加の関連情報：一般的な必要性は、サーバーから詳細情報を取得する目的で、マーカーで表されるオブジェクトのIDをajax呼び出しに渡すことです。

私たちがするとき：

marker.on('click', function(e) {...

eは、マーカーオブジェクトに到達できないMouseEventを指します。しかし、組み込みのthisオブジェクトがあり、奇妙なことに、optionsオブジェクトにアクセスするためにthis.optionsを使用する必要があり、必要なものをすべて渡すことができます。上記の場合、オプションに何らかのIDを渡すことができます。たとえば、objidとすると、上記の関数内で、this.options.objidを呼び出すことで値を取得できます

12
Will