如何在传单js中使用标记传递数据

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

使用当前版本的传单(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 3

这是一个 TypeScript 友好的方式：

数据标记文件

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;
  }
}

其他文件.ts

import { DataMarker } from './DataMarker';

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

——

注 1：我决定不将标记选项与数据属性合并

注 2：如果您需要更具体的内容，请调整数据类型

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
}