リーフレットJsを使用して、マーカーのオンクリック位置を知ることは可能ですか(アンカーポイントは無視してください)?


11

特定の高さと幅のマーカーオブジェクトがあり、単一の座標を指していますが、マーカーの視覚的表現は多くのピクセルにまたがっています。マーカーの視覚的表現をクリックすると、基になるマップ座標を取得したいのですが、代わりに、マーカーに関連付けられている単一の緯度/経度座標にしかアクセスできません。

回答:


12

一方では、Leafletがマウス(またはタッチ)イベントを処理するたびoriginalEventに、イベントのプロパティで元のDOMイベントにアクセスできます。

一方:マウス(またはタッチ)DOMイベントを考えると、リーフレットは魔法のその翻訳できるclientXclientYのインスタンスにプロパティをL.LatLng使用することによってmap.mouseEventToLatLng()

これら2つを組み合わせると、次のようなものが得られます。

marker.on('click', function(ev){
  var latlng = map.mouseEventToLatLng(ev.originalEvent);
  console.log(latlng.lat + ', ' + latlng.lng);
});

他の変換方法が役立つ場合があるので、Leafletのドキュメントを確認してください。


ありがとう、それでうまくいった。私はそのようなピクセル数に基づいて緯度を計算していました:var latlng = self._map.containerPointToLatLng([event.originalEvent.clientX - vpWidthDifference, event.originalEvent.clientY - vpHeightDifference]);
DarkKunai99

7

Leafletオブジェクトマップからいつでも座標を取得できます。次のようなものを使用できます。

map.on('click', function(e){
  var coord = e.latlng;
  var lat = coord.lat;
  var lng = coord.lng;
  console.log("You clicked the map at latitude: " + lat + " and longitude: " + lng);
  });

ここに実際の例があります。


うーん、私がCesium v​​1.25で実行しているので奇妙です。マーカーをクリックすると、イベントオブジェクトには常にマーカーのアンカーポイントの緯度が含まれます。例のように、マップの実際の座標は含まれません。
DarkKunai99 16

私はセシウムを使ったことがありません。おそらくイワンまたはcesiumタグを付けると、もっと良い答えが得られるでしょう。
ramiroaznar

申し訳ありませんが、Leaflet(最新のv1.0 rc)と言う
つもりでした

Ivanの答えを見てください。問題が解決します。あなたが言ったように私の鉱山は非常に古いリーフレットバージョンを使用しています(それをどこからコピーしたかわかりません)。
ramiroaznar 2016
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.