javascript 如何在传单js中使用标记传递数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17423261/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to pass data with marker in leaflet js
提问by vaibhav shah
I am using leaflet js with openstreetmap in my project.
I have multiple circlemarkers at same place in my map.
I want to store some Id in that circlemarkers so that I can Identify that which data should be refereed when circlemarker is clicked.
我在我的项目中使用带有 openstreetmap 的传单 js。
我的地图中的同一位置有多个圆圈标记。
我想在那个圆标记中存储一些 Id，以便我可以识别当单击圆标记时应该参考哪些数据。
My circlemarker is
我的圆圈标记是
var myMarker = L.circleMarker(myPoint, { title: 'unselected', radius: 20 });
myMarker.addTo(map);
Here I am using title for other purpose that's why I cant use it.
Can any one tell me some way to do this.
在这里，我将标题用于其他目的，这就是我不能使用它的原因。
任何人都可以告诉我一些方法来做到这一点。
回答by Patrick D
It sounds like you would like to add new functionality (functions, properties, etc) to an existing class. It would make sense to use object-oriented principals for this. For this purpose, I'd recommend you extending the CircleMarker class to add those properties.
听起来您想向现有类添加新功能（函数、属性等）。为此使用面向对象的原则是有意义的。为此，我建议您扩展 CircleMarker 类以添加这些属性。
customCircleMarker = L.CircleMarker.extend({
options: {
someCustomProperty: 'Custom data!',
anotherCustomProperty: 'More data!'
}
});
Now when you create your circle marker, create an instance of your extended object instead.
现在，当您创建圆形标记时，请改为创建扩展对象的实例。
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);
Now you can get the properties like you would any other option from the marker. This is just a simple case of extending, and you can do more as needed, such as adding other properties or functions to the object.
现在，您可以像从标记中获取任何其他选项一样获取属性。这只是一个简单的扩展案例，你可以根据需要做更多的事情，比如给对象添加其他属性或函数。
JSFiddle example: JSFiddle
JSFiddle 示例：JSFiddle
回答by Stackman
With the current version of leaflet (0.8-dev) you can just set your custom properties on the marker object itself, without having to create a custom marker class...
使用当前版本的传单（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);
}
回答by Andi AR
marker is basically javascript object rite.
标记基本上是 javascript 对象仪式。
Below snippet solve my case simply.
下面的片段简单地解决了我的情况。
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
}
回答by geegee
just to complete the picture , to create a handler which will respond to a mouse click on a marker and provide access the new options
只是为了完成图片，创建一个处理程序，该处理程序将响应鼠标单击标记并提供对新选项的访问
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);
回答by Michael P. Bazos
Here is a more TypeScript friendly way:
这是一种更 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
其他文件.ts
import { DataMarker } from './DataMarker';
const marker = new DataMarker([ lat, lng ], anyData, markerOptions);
--
——
Note 1: I decided not to merge the marker options with the dataproperty
注 1：我决定不将标记选项与数据属性合并
Note 2: Adjust the type of data if you need something more specific
注 2：如果您需要更具体的内容，请调整数据类型
回答by Nikhil VJ
I would recommend to structure in your data for your markers in the standard GeoJSON format, which makes it compatible for direct saving as shapefile, etc.
我建议以标准 GeoJSON 格式为标记构建数据结构，这使其兼容直接保存为 shapefile 等。
var myMarker = L.circleMarker(myPoint, { title: 'unselected', radius: 20 });
myMarker.properties.id = your_Id;
myMarker.addTo(map);
To retrieve the stored information and do things with it or pass it on to other parts of your program, showing a sample onclick function:
要检索存储的信息并对其进行处理或将其传递给程序的其他部分，请显示示例 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
}
It took me a while to find out the e.layer.propertiesway to access the clicked marker's properties, so hope this helps someone. Most other examples only focused on yielding the lat-long of the marker, e.latlng.
Note that you can use this same code even with a whole layer / group of markers. The function will work on each individual marker.
我花了一段时间才找到e.layer.properties访问点击标记属性的方法，所以希望这对某人有所帮助。大多数其他示例只关注生成标记的经纬度，e.latlng。请注意，即使使用整个图层/一组标记，您也可以使用相同的代码。该功能将适用于每个单独的标记。
