Как передавать данные маркером в листе js

Я использую буклет js с openstreetmap в моем проекте.
У меня есть несколько круглых знаков в одном месте на моей карте.
Я хочу сохранить некоторый идентификатор в круглых знаках, чтобы я мог идентифицировать, какие данные должны быть реферированы при щелчке по кругу.

Мой круговой знак

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

Здесь я использую название для других целей, почему я не могу его использовать.
Может ли кто-нибудь сказать мне, как это сделать.

Ответ 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

Ответ 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);
}

Ответ 3

просто для завершения изображения, чтобы создать обработчик, который будет реагировать на щелчок мышью на маркере и предоставить доступ к новым параметрам

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

Маркер

- это в основном 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
}

Ответ 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 к свойствам e.layer.properties маркеров, поэтому надеюсь, что это кому-нибудь поможет. Большинство других примеров фокусировались только на получении e.latlng маркера, e.latlng. Обратите внимание, что вы можете использовать этот код даже с целым слоем/группой маркеров. Функция будет работать на каждом отдельном маркере.

Ответ 6

Вот более удобный для 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: отрегулируйте тип данных, если вам нужно что-то более конкретное