リーフレットのマーカーでデータを渡す方法

Question

私のプロジェクトでopenstreetmapでリーフレットjsを使用しています。
マップの同じ場所に複数のサークルマーカーがあります。
サークルマーカーがクリックされたときにどのデータを審査するべきかを特定できるように、そのサークルマーカーにIDを保存したいとします。

私circlemarkerは、ここで私は、私はそれを使用傾ける理由です他の目的のためにタイトルを使用してい

var myMarker = L.circleMarker(myPoint, { title: 'unselected', radius: 20 }); 
myMarker.addTo(map); 

です。
これを行う方法を教えてもらえますか？

Answer 1

新しい機能（関数、プロパティなど）を既存のクラスに追加するように思えます。このためにオブジェクト指向のプリンシパルを使用することは理にかなっています。この目的のために、CircleMarkerクラスを拡張してそれらのプロパティを追加することをお勧めします。

customCircleMarker = L.CircleMarker.extend({ 
    options: { 
     someCustomProperty: 'Custom data!', 
     anotherCustomProperty: 'More data!' 
    } 
}); 

円マーカーを作成するときに、代わりに拡張オブジェクトのインスタンスを作成します。

var myMarker = new customCircleMarker(myPoint, { 
    title: 'unselected', 
    radius: 20, 
    someCustomProperty: 'Adding custom data to this marker!', 
    anotherCustomProperty: 'More custom data to this marker!' 
}); 
myMarker.addTo(map); 

マーカーから他のオプションと同じようなプロパティを取得できます。これは単純な拡張のケースに過ぎず、オブジェクトに他のプロパティや関数を追加するなど、必要に応じてさらに処理を行うことができます。

JSFiddle例：JSFiddle

Answer 2

ばかりの現在のバージョンでは

function onMarkerClick(e) { 
    console.log("You clicked the marker " + e.target.options.someCustomProperty); 
    console.log("You clicked the marker " + e.target.options.anotherCustomProperty); 
} 
marker.on('click', onMarkerClick); 

Answer 3

新しいオプションをマーカーの上にマウスクリックに反応し、アクセスを提供するハンドラを作成するには、絵を完成させますリーフレット（0.8-dev）を使用すると、カスタムマーカークラスを作成せずに、マーカーオブジェクト自体にカスタムプロパティを設定することができます...

function map() { 
    return L.map('leaflet-canvas', 
    { 
     maxZoom: 10, 
     minZoom: 0, 
     crs: L.CRS.Simple 
    }); 
} 

var map = map().setView([0, 0], 10).on('click', onMapClick); 

function onMapClick(e) { 
    var marker = L.circleMarker(e.latlng, {draggable:true}); 

    marker.myCustomID = Math.floor((Math.random() * 100) + 1); 

    marker.on('click', onMarkerClick); 

    map.addLayer(marker); 

    // 'click' the new marker to show the ID when marker created 
    marker.fireEvent('click'); 
} 

function onMarkerClick(e) { 
    alert(e.target.myCustomID); 
} 

Answer 4

マーカーは基本的にjavascriptオブジェクトの儀式です。

以下のスニペットは私の場合を簡単に解決します。

var marker = new L.marker([13.0102, 80.2157]).addTo(mymap).on('mouseover', onClick); 
    marker.key = "marker-1"; 

    var marker2 =new L.marker([13.0101, 80.2157]).addTo(mymap).on('mouseover', onClick); 
    marker2.key = "marker-2"; 

    function onClick(e) { 
    alert(this.key); // i can expect my keys here 
} 

Answer 5

私が保存されている情報を取得し、実行するには

など、シェープファイルとして直接節約のために、それは互換性になり、標準的にGeoJSON形式であなたのマーカーのためにあなたのデータに構造化する

var myMarker = L.circleMarker(myPoint, { title: 'unselected', radius: 20 }); 
myMarker.properties.id = your_Id; 
myMarker.addTo(map); 

をお勧めしますそれで物事やサンプルonclickの機能を示す、あなたのプログラムの他の部分にそれを渡す：

myMarker.on('click',markerOnClick); 
function markerOnClick(e) { 
    my_ID = e.layer.properties.id; 
    console.log(my_ID, e.latlng); 
    // do whatever you want with my_ID 
} 

それはe.layer.properties WAを見つけるために私にしばらく時間がかかりましたクリックしたマーカーのプロパティにアクセスするには、これが誰かを助けることを願っています。他のほとんどの例は、マーカーのlat-longを生成することにのみ焦点を当てていました。e.latlng マーカー/レイヤー全体でも同じコードを使用できます。この機能は個々のマーカーで機能します。