web-dev-qa-db-ja.com

リーフレットjsでマーカーを使用してデータを渡す方法

私のプロジェクトではopenstreetmapでチラシjsを使用しています。
マップの同じ場所に複数のサークルマーカーがあります。
サークルマーカーがクリックされたときに参照する必要があるデータを特定できるように、そのサークルマーカーにいくつかのIDを保存します。

私のサークルマーカーは

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

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

javascriptleaflet
29
vaibhav shah

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

40
Patrick D

現在のバージョンのリーフレット（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);
}
17
Stackman

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

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);
4
geegee

マーカーは基本的に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
}
4
Andi AR

TypeScriptに適した方法を次に示します。

DataMarker.ts

import * as L from 'leaflet';

export class DataMarker extends L.Marker {
  data: any;

  constructor(latLng: L.LatLngExpression, data: any, options?: L.MarkerOptions) {
    super(latLng, options);
    this.setData(data);
  }

  getData() {
    return this.data;
  }

  setData(data: any) {
    this.data = data;
  }
}

SomeOtherFile.ts

import { DataMarker } from './DataMarker';

const marker = new DataMarker([ lat, lng ], anyData, markerOptions);

-

注1：マーカーオプションをdataプロパティとマージしないことにしました

注2：より具体的なものが必要な場合は、データのタイプを調整します

2
Michael P. Bazos

標準の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方法を見つけるのにしばらく時間がかかったので、これが誰かの役に立つことを願っています。他のほとんどの例は、緯度経度のマーカーe.latlngを生成することにのみ焦点を当てていました。レイヤー全体またはマーカーのグループでも、この同じコードを使用できることに注意してください。この関数は、個々のマーカーごとに機能します。

0
Nikhil VJ