37

我在我的项目中使用带有 openstreetmap 的传单 js。
我在地图的同一个地方有多个圆圈标记。
我想在那个circlemarkers中存储一些Id，这样我就可以确定在点击circlemarker时应该参考哪些数据。

我的圆圈标记是

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 回答
32

使用当前版本的传单（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);
}
于 2015-02-22T22:47:36.363 回答
13

这是一种 TypeScript 友好的方式：

数据标记.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;
  }
}

一些其他文件.ts

import { DataMarker } from './DataMarker';

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

--

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

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

于 2018-12-18T15:57:28.470 回答
8

标记基本上是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
}
于 2017-04-19T12:10:03.203 回答
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 回答
1

试试这个唯一识别传单标记，它对我有用。

//Handle marker click
var onMarkerClick = function(e){
    alert("You clicked on marker with customId: " +this.options.myCustomId);   
}
//Create marker with custom attribute
var marker = L.marker([36.83711,-2.464459], {myCustomId: "abc123"});
marker.on('click', onMarkerClick);
于 2020-10-11T12:51:18.837 回答
1

我建议以标准 GeoJSON 格式为您的标记构建数据，这使其兼容直接保存为 shapefile 等。

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. 请注意，即使使用一整层/一组标记，您也可以使用相同的代码。该功能将适用于每个单独的标记。

于 2018-02-25T16:59:26.193 回答
0

我有一个简单的解决方案。每个 circleMarker 中的 options 属性是存储自定义值的好地方。

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

您可以轻松地检索选项中的值。

function markerOnClick(e) {
    var id = e.options.custom_id;
}
于 2020-09-20T14:19:29.470 回答