37

プロジェクトでopenstreetmapでリーフレットjsを使用しています。
マップの同じ場所に複数の円マーカーがあります。
サークルマーカーがクリックされたときにどのデータを参照する必要があるかを識別できるように、そのサークルマーカーにIDを保存したいと思います。

私のサークルマーカーは

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

ここでは、タイトルを他の目的で使用しているため、使用できません。
誰でもこれを行う方法を教えてもらえますか。

4

8 に答える 8

56

新しい機能 (関数、プロパティなど) を既存のクラスに追加したいと思われます。これには、オブジェクト指向のプリンシパルを使用するのが理にかなっています。この目的のために、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

于 2013-07-02T11:21:31.250 に答える
4

画像を完成させ、マーカーのマウスクリックに応答し、新しいオプションへのアクセスを提供するハンドラーを作成します

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);
于 2014-12-01T21:32:28.307 に答える